react-formal-bootstrap
v1.1.0
Published
react-formal-bootstrap ===
Downloads
33
Readme
react-formal-bootstrap
A react-bootstrap
form input adapter for react-formal
import Form from 'react-formal'
import types from 'react-formal-bootstrap';
Form.addInputTypes(types);
You can also use each input individually outside of the react-formal context by importing the
input from react-formal-bootstrap/lib
, to take advantage of the value parsing logic not present in native inputs.
Example
import React from 'react';
import Form from 'react-formal';
import * as yup from 'yup';
import ControlLabel from 'react-bootstrap/lib/ControlLabel';
import FormGroup from 'react-formal-bootstrap/lib/FormGroup';
const schema = yup.object({
name: yup.string(),
age: yup.number(),
favoriteColor: yup.array(
yup.string()
)
})
function MyForm() {
return (
<Form schema={schema}>
<FormGroup for="name" controlId="field--name">
<ControlLabel>Name</ControlLabel>
<div>
<Form.Field name="name" />
<Form.Message for="name" />
</div>
</FormGroup>
<FormGroup for="age" controlId="field--age">
<ControlLabel>Age</ControlLabel>
<div>
<Form.Field name="age" />
<Form.Message for="age" />
</div>
</FormGroup>
<FormGroup for="favoriteColor" controlId="field--age">
<ControlLabel>Favorite color</ControlLabel>
<div>
<Form.Field name="favoriteColor">
<option value={null}> </option>
<option value="red">Red</option>
<option value="blue">blue</option>
<option value="green">green</option>
</Form.Field>
<Form.Message for="favoriteColor" />
</div>
</FormGroup>
</Form>
)
}