React Form Control component
npm install @trendmicro/react-form-control
React Form Control
Demo: https://trendmicro-frontend.github.io/react-form-control
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:
`js
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';
`
The component renders a form control with block-level styling (display: block and width: 100%). Supported textual form controls includes ,
`jsx`
Using the 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 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:
`jsx
const FormGroup = styled.div
margin-bottom: 12px;;``
#### 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' |
MIT