Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trendmicro-frontend/react-form-control
React Form Control component
https://github.com/trendmicro-frontend/react-form-control
Last synced: about 1 month ago
JSON representation
React Form Control component
- Host: GitHub
- URL: https://github.com/trendmicro-frontend/react-form-control
- Owner: trendmicro-frontend
- License: mit
- Created: 2019-03-28T11:39:39.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-09-22T14:10:25.000Z (over 1 year ago)
- Last Synced: 2024-12-12T12:51:33.675Z (2 months ago)
- Language: JavaScript
- Homepage: https://trendmicro-frontend.github.io/react-form-control/
- Size: 703 KB
- Stars: 3
- Watchers: 17
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - react-form-control - React Form Control component ([demo](https://trendmicro-frontend.github.io/react-form-control/)). (Trend Micro / React Components)
- awesome_frontend_development_resources - react-form-control - React Form Control component ([demo](https://trendmicro-frontend.github.io/react-form-control/)). (Trend Micro / React Components)
- awesome_frontend_development_resources - react-form-control - React Form Control component ([demo](https://trendmicro-frontend.github.io/react-form-control/)). (Trend Micro / React Components)
README
# react-form-control [](https://travis-ci.org/trendmicro-frontend/react-form-control) [](https://coveralls.io/github/trendmicro-frontend/react-form-control?branch=master)
[](https://nodei.co/npm/@trendmicro/react-form-control/)
React Form Control
Demo: https://trendmicro-frontend.github.io/react-form-control
## Installation
1. Install the latest version of [react](https://github.com/facebook/react) and [react-form-control](https://github.com/trendmicro-frontend/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';
```
## Overview
### Form controls
The `` component renders a form control with block-level styling (`display: block` and `width: 100%`). Supported textual form controls includes ``, ``, and ``.
```jsx
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
```
### Form groups
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](https://github.com/styled-components/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;
`;
```
## 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