@trendmicro/react-form-control v2.0.0

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="name@example.com" />
</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

Input

Select

Textarea

License

MIT