react-form-control

React Form Control

Demo: https://trendmicro-frontend.github.io/react-form-control

Installation

1. Install the latest version of react and react-form-control:

npm install --save react @trendmicro/react-form-control

2. At this point you can import @trendmicro/react-form-control and its styles in your application as follows:

import FormControl, { Input, Select, Textarea } from '@trendmicro/react-form-control';

// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-form-control/dist/react-form-control.css';

Overview

Form controls

The <FormControl> component renders a form control with block-level styling (display: block and width: 100%). Supported textual form controls includes <Input>, <Select>, and <Textarea>.

<FormGroup>
    <label>Email address</label>
    <Input type="text" placeholder="[email protected]" />
</FormGroup>
<FormGroup>
    <label>Example select</label>
    <Select defaultValue="1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </Select>
</FormGroup>
<FormGroup>
    <label>Example multiple select</label>
    <Select multiple defaultValue="1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </Select>
</FormGroup>
<FormGroup>
    <label>Example textarea</label>
    <Textarea rows={3} />
</FormGroup>

Form groups

Using the <FormGroup> component is the easiest way to add some structure to forms, it provides a flexible way that encourages proper grouping of labels, controls, and form validation messaging.

The <FormGroup> component is not provided here, but you can use styled-components to style with plain CSS styles. By default, it only applies margin-bottom as below:

const FormGroup = styled.div`
    margin-bottom: 12px;
`;

API

Properties

FromControl

Name	Type	Default	Description
tag	element	'div'
lg	boolean
md	boolean		Defaults to 'md' if nothing is specified.
sm	boolean

Input

Name	Type	Default	Description
tag	element	'input'
lg	boolean
md	boolean		Defaults to 'md' if nothing is specified.
sm	boolean

Select

Name	Type	Default	Description
tag	element	'select'
lg	boolean
md	boolean		Defaults to 'md' if nothing is specified.
sm	boolean

Textarea

Name	Type	Default	Description
tag	element	'textarea'

License

MIT