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