The <FormControl>
component renders a form control with Bootstrap styling. The <FormGroup>
component wraps a form control with proper spacing, along with support for a label, help text, and validation state. To ensure accessibility, set controlId
on <FormGroup>
, and use <FormLabel>
for the label.
< Form >
< Form.Group controlId = " formBasicEmail " >
< Form.Label > Email address </ Form.Label >
< Form.Control type = " email " placeholder = " Enter email " />
< Form.Text className = " text-muted " >
We'll never share your email with anyone else .
</ Form.Text >
</ Form.Group >
< Form.Group controlId = " formBasicPassword " >
< Form.Label > Password </ Form.Label >
< Form.Control type = " password " placeholder = " Password " />
</ Form.Group >
< Form.Group controlId = " formBasicCheckbox " >
< Form.Check type = " checkbox " label = " Check me out " />
</ Form.Group >
< Button variant = " primary " type = " submit " >
Submit
</ Button >
</ Form >
The <FormControl>
component directly renders the <input>
or other specified component. If you need to access the value of an uncontrolled <FormControl>
, attach a ref
to it as you would with an uncontrolled input, then call ReactDOM.findDOMNode(ref)
to get the DOM node. You can then interact with that node as you would with any other uncontrolled input.
If your application contains a large number of form groups, we recommend building a higher-level component encapsulating a complete field group that renders the label, the control, and any other necessary components. We don't provide this out-of-the-box, because the composition of those field groups is too specific to an individual application to admit a good one-size-fits-all solution.
For textual form controls—like input
s, select
s, and textarea
s—use the FormControl
component. FormControl adds some additional styles for general appearance, focus state, sizing, and more.
<Form>
<Form.Group controlId="exampleForm.ControlInput1">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="name@example.com" />
</Form.Group>
<Form.Group controlId="exampleForm.ControlSelect1">
<Form.Label>Example select</Form.Label>
<Form.Control as="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Form.Control>
</Form.Group>
<Form.Group controlId="exampleForm.ControlSelect2">
<Form.Label>Example multiple select</Form.Label>
<Form.Control as="select" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Form.Control>
</Form.Group>
<Form.Group controlId="exampleForm.ControlTextarea1">
<Form.Label>Example textarea</Form.Label>
<Form.Control as="textarea" rows={3} />
</Form.Group>
</Form> < Form >
< Form.Group controlId = " exampleForm.ControlInput1 " >
< Form.Label > Email address </ Form.Label >
< Form.Control type = " email " placeholder = " name@example.com " />
</ Form.Group >
< Form.Group controlId = " exampleForm.ControlSelect1 " >
< Form.Label > Example select </ Form.Label >
< Form.Control as = " select " >
< option > 1 </ option >
< option > 2 </ option >
< option > 3 </ option >
< option > 4 </ option >
< option > 5 </ option >
</ Form.Control >
</ Form.Group >
< Form.Group controlId = " exampleForm.ControlSelect2 " >
< Form.Label > Example multiple select </ Form.Label >
< Form.Control as = " select " multiple >
< option > 1 </ option >
< option > 2 </ option >
< option > 3 </ option >
< option > 4 </ option >
< option > 5 </ option >
</ Form.Control >
</ Form.Group >
< Form.Group controlId = " exampleForm.ControlTextarea1 " >
< Form.Label > Example textarea </ Form.Label >
< Form.Control as = " textarea " rows = { 3 } />
</ Form.Group >
</ Form >
For file inputs, use Form.File
.
<Form>
<Form.Group>
<Form.File id="exampleFormControlFile1" label="Example file input" />
</Form.Group>
</Form> < Form >
< Form.Group >
< Form.File id = " exampleFormControlFile1 " label = " Example file input " />
</ Form.Group >
</ Form >
Use size
on <FormControl>
and <FormLabel>
to change the size of inputs and labels respectively.
<Form.Group>
<Form.Control size="lg" type="text" placeholder="Large text" />
<br />
<Form.Control type="text" placeholder="Normal text" />
<br />
<Form.Control size="sm" type="text" placeholder="Small text" />
</Form.Group> < Form.Group >
< Form.Control size = " lg " type = " text " placeholder = " Large text " />
< br />
< Form.Control type = " text " placeholder = " Normal text " />
< br />
< Form.Control size = " sm " type = " text " placeholder = " Small text " />
</ Form.Group >
Large select Default select Small select
<Form.Group>
<Form.Control as="select" size="lg">
<option>Large select</option>
</Form.Control>
<br />
<Form.Control as="select">
<option>Default select</option>
</Form.Control>
<br />
<Form.Control size="sm" as="select">
<option>Small select</option>
</Form.Control>
</Form.Group> < Form.Group >
< Form.Control as = " select " size = " lg " >
< option > Large select </ option >
</ Form.Control >
< br />
< Form.Control as = " select " >
< option > Default select </ option >
</ Form.Control >
< br />
< Form.Control size = " sm " as = " select " >
< option > Small select </ option >
</ Form.Control >
</ Form.Group >
Add the readOnly
prop on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
<Form.Control type="text" placeholder="Readonly input here..." readOnly /> < Form.Control type = " text " placeholder = " Readonly input here... " readOnly />
Readonly plain text# If you want to have readonly elements in your form styled as plain text, use the plaintext
prop on FormControls to remove the default form field styling and preserve the correct margin and padding.
<Form>
<Form.Group as={Row} controlId="formPlaintextEmail">
<Form.Label column sm="2">
Email
</Form.Label>
<Col sm="10">
<Form.Control plaintext readOnly defaultValue="email@example.com" />
</Col>
</Form.Group>
<Form.Group as={Row} controlId="formPlaintextPassword">
<Form.Label column sm="2">
Password
</Form.Label>
<Col sm="10">
<Form.Control type="password" placeholder="Password" />
</Col>
</Form.Group>
</Form> < Form >
< Form.Group as = { Row } controlId = " formPlaintextEmail " >
< Form.Label column sm = " 2 " >
Email
</ Form.Label >
< Col sm = " 10 " >
< Form.Control plaintext readOnly defaultValue = " email@example.com " />
</ Col >
</ Form.Group >
< Form.Group as = { Row } controlId = " formPlaintextPassword " >
< Form.Label column sm = " 2 " >
Password
</ Form.Label >
< Col sm = " 10 " >
< Form.Control type = " password " placeholder = " Password " />
</ Col >
</ Form.Group >
</ Form >
<Form>
<Form.Group controlId="formBasicRange">
<Form.Label>Range</Form.Label>
<Form.Control type="range" />
</Form.Group>
</Form> < Form >
< Form.Group controlId = " formBasicRange " >
< Form.Label > Range </ Form.Label >
< Form.Control type = " range " />
</ Form.Group >
</ Form >
For the non-textual checkbox and radio controls, FormCheck
provides a single component for both types that adds some additional styling and improved layout.
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with FormCheck.
<Form>
{['checkbox', 'radio'].map((type) => (
<div key={`default-${type}`} className="mb-3">
<Form.Check
type={type}
id={`default-${type}`}
label={`default ${type}`}
/>
<Form.Check
disabled
type={type}
label={`disabled ${type}`}
id={`disabled-default-${type}`}
/>
</div>
))}
</Form> < Form >
{ [ 'checkbox' , 'radio' ] . map ( ( type ) => (
< div key = { ` default- ${ type } ` } className = " mb-3 " >
< Form.Check
type = { type }
id = { ` default- ${ type } ` }
label = { ` default ${ type } ` }
/>
< Form.Check
disabled
type = { type }
label = { ` disabled ${ type } ` }
id = { ` disabled-default- ${ type } ` }
/>
</ div >
) ) }
</ Form >
Group checkboxes or radios on the same horizontal row by adding the inline
prop.
<Form>
{['checkbox', 'radio'].map((type) => (
<div key={`inline-${type}`} className="mb-3">
<Form.Check inline label="1" name="group1" type={type} id={`inline-${type}-1`} />
<Form.Check inline label="2" name="group1" type={type} id={`inline-${type}-2`} />
<Form.Check
inline
disabled
label="3 (disabled)"
type={type}
id={`inline-${type}-3`}
/>
</div>
))}
</Form> < Form >
{ [ 'checkbox' , 'radio' ] . map ( ( type ) => (
< div key = { ` inline- ${ type } ` } className = " mb-3 " >
< Form.Check inline label = " 1 " name = " group1 " type = { type } id = { ` inline- ${ type } -1 ` } />
< Form.Check inline label = " 2 " name = " group1 " type = { type } id = { ` inline- ${ type } -2 ` } />
< Form.Check
inline
disabled
label = " 3 (disabled) "
type = { type }
id = { ` inline- ${ type } -3 ` }
/>
</ div >
) ) }
</ Form >
When you render a FormCheck without a label (no children
) some additional styling is applied to keep the inputs from collapsing. Remember to add an aria-label
when omitting labels!
<>
<Form.Check aria-label="option 1" />
<Form.Check type="radio" aria-label="radio 1" />
</> < >
< Form.Check aria-label = " option 1 " />
< Form.Check type = " radio " aria-label = " radio 1 " />
</ >
When you need tighter control, or want to customize how the FormCheck
component renders, it may better to use it's constituent parts directly.
By provided children
to the FormCheck
you can forgo the default rendering and handle it yourself. (You can still provide an id
to the FormCheck
or FormGroup
and have it propagate to the label and input).
<Form>
{['checkbox', 'radio'].map((type) => (
<div key={type} className="mb-3">
<Form.Check type={type} id={`check-api-${type}`}>
<Form.Check.Input type={type} isValid />
<Form.Check.Label>{`Custom api ${type}`}</Form.Check.Label>
<Form.Control.Feedback type="valid">You did it!</Form.Control.Feedback>
</Form.Check>
</div>
))}
</Form> < Form >
{ [ 'checkbox' , 'radio' ] . map ( ( type ) => (
< div key = { type } className = " mb-3 " >
< Form.Check type = { type } id = { ` check-api- ${ type } ` } >
< Form.Check.Input type = { type } isValid />
< Form.Check.Label > { ` Custom api ${ type } ` } </ Form.Check.Label >
< Form.Control.Feedback type = " valid " > You did it ! </ Form.Control.Feedback >
</ Form.Check >
</ div >
) ) }
</ Form >
FormControl and FormCheck both apply display: block
with width: 100%
to controls, which means they stack vertically by default. Additional components and props can be used to vary this layout on a per-form basis.
The FormGroup
component is the easiest way to add some structure to forms. It provides a flexible container for grouping of labels, controls, optional help text, and form validation messaging. By default it only applies margin-bottom, but it picks up additional styles in <Form inline >
as needed. Use it with fieldset
s, div
s, or nearly any other element.
You also add the controlId
prop to accessibly wire the nested label and input together via the id
.
<Form>
<Form.Group controlId="formGroupEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group controlId="formGroupPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
</Form> < Form >
< Form.Group controlId = " formGroupEmail " >
< Form.Label > Email address </ Form.Label >
< Form.Control type = " email " placeholder = " Enter email " />
</ Form.Group >
< Form.Group controlId = " formGroupPassword " >
< Form.Label > Password </ Form.Label >
< Form.Control type = " password " placeholder = " Password " />
</ Form.Group >
</ Form >
More complex forms can be built using the grid components. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
<Form>
<Row>
<Col>
<Form.Control placeholder="First name" />
</Col>
<Col>
<Form.Control placeholder="Last name" />
</Col>
</Row>
</Form> < Form >
< Row >
< Col >
< Form.Control placeholder = " First name " />
</ Col >
< Col >
< Form.Control placeholder = " Last name " />
</ Col >
</ Row >
</ Form >
You may also swap <Row>
for <Form.Row>
, a variation of the standard grid row that overrides the default column gutters for tighter and more compact layouts.
<Form>
<Form.Row>
<Col>
<Form.Control placeholder="First name" />
</Col>
<Col>
<Form.Control placeholder="Last name" />
</Col>
</Form.Row>
</Form> < Form >
< Form.Row >
< Col >
< Form.Control placeholder = " First name " />
</ Col >
< Col >
< Form.Control placeholder = " Last name " />
</ Col >
</ Form.Row >
</ Form >
More complex layouts can also be created with the grid system.
<Form>
<Form.Row>
<Form.Group as={Col} controlId="formGridEmail">
<Form.Label>Email</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group as={Col} controlId="formGridPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
</Form.Row>
<Form.Group controlId="formGridAddress1">
<Form.Label>Address</Form.Label>
<Form.Control placeholder="1234 Main St" />
</Form.Group>
<Form.Group controlId="formGridAddress2">
<Form.Label>Address 2</Form.Label>
<Form.Control placeholder="Apartment, studio, or floor" />
</Form.Group>
<Form.Row>
<Form.Group as={Col} controlId="formGridCity">
<Form.Label>City</Form.Label>
<Form.Control />
</Form.Group>
<Form.Group as={Col} controlId="formGridState">
<Form.Label>State</Form.Label>
<Form.Control as="select" defaultValue="Choose...">
<option>Choose...</option>
<option>...</option>
</Form.Control>
</Form.Group>
<Form.Group as={Col} controlId="formGridZip">
<Form.Label>Zip</Form.Label>
<Form.Control />
</Form.Group>
</Form.Row>
<Form.Group id="formGridCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form> < Form >
< Form.Row >
< Form.Group as = { Col } controlId = " formGridEmail " >
< Form.Label > Email </ Form.Label >
< Form.Control type = " email " placeholder = " Enter email " />
</ Form.Group >
< Form.Group as = { Col } controlId = " formGridPassword " >
< Form.Label > Password </ Form.Label >
< Form.Control type = " password " placeholder = " Password " />
</ Form.Group >
</ Form.Row >
< Form.Group controlId = " formGridAddress1 " >
< Form.Label > Address </ Form.Label >
< Form.Control placeholder = " 1234 Main St " />
</ Form.Group >
< Form.Group controlId = " formGridAddress2 " >
< Form.Label > Address 2 </ Form.Label >
< Form.Control placeholder = " Apartment, studio, or floor " />
</ Form.Group >
< Form.Row >
< Form.Group as = { Col } controlId = " formGridCity " >
< Form.Label > City </ Form.Label >
< Form.Control />
</ Form.Group >
< Form.Group as = { Col } controlId = " formGridState " >
< Form.Label > State </ Form.Label >
< Form.Control as = " select " defaultValue = " Choose... " >
< option > Choose ... </ option >
< option > ... </ option >
</ Form.Control >
</ Form.Group >
< Form.Group as = { Col } controlId = " formGridZip " >
< Form.Label > Zip </ Form.Label >
< Form.Control />
</ Form.Group >
</ Form.Row >
< Form.Group id = " formGridCheckbox " >
< Form.Check type = " checkbox " label = " Check me out " />
</ Form.Group >
< Button variant = " primary " type = " submit " >
Submit
</ Button >
</ Form >
You may also swap <Row>
for <Form.Row>
, a variation of the standard grid row that overrides the default column gutters for tighter and more compact layouts.
<Form>
<Form.Group as={Row} controlId="formHorizontalEmail">
<Form.Label column sm={2}>
Email
</Form.Label>
<Col sm={10}>
<Form.Control type="email" placeholder="Email" />
</Col>
</Form.Group>
<Form.Group as={Row} controlId="formHorizontalPassword">
<Form.Label column sm={2}>
Password
</Form.Label>
<Col sm={10}>
<Form.Control type="password" placeholder="Password" />
</Col>
</Form.Group>
<fieldset>
<Form.Group as={Row}>
<Form.Label as="legend" column sm={2}>
Radios
</Form.Label>
<Col sm={10}>
<Form.Check
type="radio"
label="first radio"
name="formHorizontalRadios"
id="formHorizontalRadios1"
/>
<Form.Check
type="radio"
label="second radio"
name="formHorizontalRadios"
id="formHorizontalRadios2"
/>
<Form.Check
type="radio"
label="third radio"
name="formHorizontalRadios"
id="formHorizontalRadios3"
/>
</Col>
</Form.Group>
</fieldset>
<Form.Group as={Row} controlId="formHorizontalCheck">
<Col sm={{ span: 10, offset: 2 }}>
<Form.Check label="Remember me" />
</Col>
</Form.Group>
<Form.Group as={Row}>
<Col sm={{ span: 10, offset: 2 }}>
<Button type="submit">Sign in</Button>
</Col>
</Form.Group>
</Form> < Form >
< Form.Group as = { Row } controlId = " formHorizontalEmail " >
< Form.Label column sm = { 2 } >
Email
</ Form.Label >
< Col sm = { 10 } >
< Form.Control type = " email " placeholder = " Email " />
</ Col >
</ Form.Group >
< Form.Group as = { Row } controlId = " formHorizontalPassword " >
< Form.Label column sm = { 2 } >
Password
</ Form.Label >
< Col sm = { 10 } >
< Form.Control type = " password " placeholder = " Password " />
</ Col >
</ Form.Group >
< fieldset >
< Form.Group as = { Row } >
< Form.Label as = " legend " column sm = { 2 } >
Radios
</ Form.Label >
< Col sm = { 10 } >
< Form.Check
type = " radio "
label = " first radio "
name = " formHorizontalRadios "
id = " formHorizontalRadios1 "
/>
< Form.Check
type = " radio "
label = " second radio "
name = " formHorizontalRadios "
id = " formHorizontalRadios2 "
/>
< Form.Check
type = " radio "
label = " third radio "
name = " formHorizontalRadios "
id = " formHorizontalRadios3 "
/>
</ Col >
</ Form.Group >
</ fieldset >
< Form.Group as = { Row } controlId = " formHorizontalCheck " >
< Col sm = { { span : 10 , offset : 2 } } >
< Form.Check label = " Remember me " />
</ Col >
</ Form.Group >
< Form.Group as = { Row } >
< Col sm = { { span : 10 , offset : 2 } } >
< Button type = " submit " > Sign in </ Button >
</ Col >
</ Form.Group >
</ Form >
You can size the <FormLabel>
using the column prop as shown.
<Form.Group>
<Form.Row>
<Form.Label column="lg" lg={2}>
Large Text
</Form.Label>
<Col>
<Form.Control size="lg" type="text" placeholder="Large text" />
</Col>
</Form.Row>
<br />
<Form.Row>
<Form.Label column lg={2}>
Normal Text
</Form.Label>
<Col>
<Form.Control type="text" placeholder="Normal text" />
</Col>
</Form.Row>
<br />
<Form.Row>
<Form.Label column="sm" lg={2}>
Small Text
</Form.Label>
<Col>
<Form.Control size="sm" type="text" placeholder="Small text" />
</Col>
</Form.Row>
</Form.Group> < Form.Group >
< Form.Row >
< Form.Label column = " lg " lg = { 2 } >
Large Text
</ Form.Label >
< Col >
< Form.Control size = " lg " type = " text " placeholder = " Large text " />
</ Col >
</ Form.Row >
< br />
< Form.Row >
< Form.Label column lg = { 2 } >
Normal Text
</ Form.Label >
< Col >
< Form.Control type = " text " placeholder = " Normal text " />
</ Col >
</ Form.Row >
< br />
< Form.Row >
< Form.Label column = " sm " lg = { 2 } >
Small Text
</ Form.Label >
< Col >
< Form.Control size = " sm " type = " text " placeholder = " Small text " />
</ Col >
</ Form.Row >
</ Form.Group >
As shown in the previous examples, our grid system allows you to place any number of <Col>
s within a <Row>
or <Form.Row>
. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining <Col>
s equally split the rest, with specific column classes like <Col xs={7}>
.
<Form>
<Form.Row>
<Col xs={7}>
<Form.Control placeholder="City" />
</Col>
<Col>
<Form.Control placeholder="State" />
</Col>
<Col>
<Form.Control placeholder="Zip" />
</Col>
</Form.Row>
</Form> < Form >
< Form.Row >
< Col xs = { 7 } >
< Form.Control placeholder = " City " />
</ Col >
< Col >
< Form.Control placeholder = " State " />
</ Col >
< Col >
< Form.Control placeholder = " Zip " />
</ Col >
</ Form.Row >
</ Form >
The example below uses a flexbox utility to vertically center the contents and changes <Col>
to <Col xs="auto">
so that your columns only take up as much space as needed. Put another way, the column sizes itself based on on the contents.
<Form>
<Form.Row className="align-items-center">
<Col xs="auto">
<Form.Label htmlFor="inlineFormInput" srOnly>
Name
</Form.Label>
<Form.Control
className="mb-2"
id="inlineFormInput"
placeholder="Jane Doe"
/>
</Col>
<Col xs="auto">
<Form.Label htmlFor="inlineFormInputGroup" srOnly>
Username
</Form.Label>
<InputGroup className="mb-2">
<InputGroup.Prepend>
<InputGroup.Text>@</InputGroup.Text>
</InputGroup.Prepend>
<FormControl id="inlineFormInputGroup" placeholder="Username" />
</InputGroup>
</Col>
<Col xs="auto">
<Form.Check
type="checkbox"
id="autoSizingCheck"
className="mb-2"
label="Remember me"
/>
</Col>
<Col xs="auto">
<Button type="submit" className="mb-2">
Submit
</Button>
</Col>
</Form.Row>
</Form> < Form >
< Form.Row className = " align-items-center " >
< Col xs = " auto " >
< Form.Label htmlFor = " inlineFormInput " srOnly >
Name
</ Form.Label >
< Form.Control
className = " mb-2 "
id = " inlineFormInput "
placeholder = " Jane Doe "
/>
</ Col >
< Col xs = " auto " >
< Form.Label htmlFor = " inlineFormInputGroup " srOnly >
Username
</ Form.Label >
< InputGroup className = " mb-2 " >
< InputGroup.Prepend >
< InputGroup.Text > @ </ InputGroup.Text >
</ InputGroup.Prepend >
< FormControl id = " inlineFormInputGroup " placeholder = " Username " />
</ InputGroup >
</ Col >
< Col xs = " auto " >
< Form.Check
type = " checkbox "
id = " autoSizingCheck "
className = " mb-2 "
label = " Remember me "
/>
</ Col >
< Col xs = " auto " >
< Button type = " submit " className = " mb-2 " >
Submit
</ Button >
</ Col >
</ Form.Row >
</ Form >
You can then remix that once again with size-specific column classes.
<Form>
<Form.Row className="align-items-center">
<Col sm={3} className="my-1">
<Form.Label htmlFor="inlineFormInputName" srOnly>
Name
</Form.Label>
<Form.Control id="inlineFormInputName" placeholder="Jane Doe" />
</Col>
<Col sm={3} className="my-1">
<Form.Label htmlFor="inlineFormInputGroupUsername" srOnly>
Username
</Form.Label>
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Text>@</InputGroup.Text>
</InputGroup.Prepend>
<FormControl id="inlineFormInputGroupUsername" placeholder="Username" />
</InputGroup>
</Col>
<Col xs="auto" className="my-1">
<Form.Check type="checkbox" id="autoSizingCheck2" label="Remember me" />
</Col>
<Col xs="auto" className="my-1">
<Button type="submit">Submit</Button>
</Col>
</Form.Row>
</Form> < Form >
< Form.Row className = " align-items-center " >
< Col sm = { 3 } className = " my-1 " >
< Form.Label htmlFor = " inlineFormInputName " srOnly >
Name
</ Form.Label >
< Form.Control id = " inlineFormInputName " placeholder = " Jane Doe " />
</ Col >
< Col sm = { 3 } className = " my-1 " >
< Form.Label htmlFor = " inlineFormInputGroupUsername " srOnly >
Username
</ Form.Label >
< InputGroup >
< InputGroup.Prepend >
< InputGroup.Text > @ </ InputGroup.Text >
</ InputGroup.Prepend >
< FormControl id = " inlineFormInputGroupUsername " placeholder = " Username " />
</ InputGroup >
</ Col >
< Col xs = " auto " className = " my-1 " >
< Form.Check type = " checkbox " id = " autoSizingCheck2 " label = " Remember me " />
</ Col >
< Col xs = " auto " className = " my-1 " >
< Button type = " submit " > Submit </ Button >
</ Col >
</ Form.Row >
</ Form >
And of course custom form controls are supported.
<Form>
<Form.Row className="align-items-center">
<Col xs="auto" className="my-1">
<Form.Label className="mr-sm-2" htmlFor="inlineFormCustomSelect" srOnly>
Preference
</Form.Label>
<Form.Control
as="select"
className="mr-sm-2"
id="inlineFormCustomSelect"
custom
>
<option value="0">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Control>
</Col>
<Col xs="auto" className="my-1">
<Form.Check
type="checkbox"
id="customControlAutosizing"
label="Remember my preference"
custom
/>
</Col>
<Col xs="auto" className="my-1">
<Button type="submit">Submit</Button>
</Col>
</Form.Row>
</Form> < Form >
< Form.Row className = " align-items-center " >
< Col xs = " auto " className = " my-1 " >
< Form.Label className = " mr-sm-2 " htmlFor = " inlineFormCustomSelect " srOnly >
Preference
</ Form.Label >
< Form.Control
as = " select "
className = " mr-sm-2 "
id = " inlineFormCustomSelect "
custom
>
< option value = " 0 " > Choose ... </ option >
< option value = " 1 " > One </ option >
< option value = " 2 " > Two </ option >
< option value = " 3 " > Three </ option >
</ Form.Control >
</ Col >
< Col xs = " auto " className = " my-1 " >
< Form.Check
type = " checkbox "
id = " customControlAutosizing "
label = " Remember my preference "
custom
/>
</ Col >
< Col xs = " auto " className = " my-1 " >
< Button type = " submit " > Submit </ Button >
</ Col >
</ Form.Row >
</ Form >
Use the inline
prop to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within forms vary slightly from their default states.
Controls are display: flex
, collapsing any HTML white space and allowing you to provide alignment control with spacing and utilities. Controls and input groups receive width: auto
to override the Bootstrap default width: 100%
. Controls only appear inline in viewports that are at least 576px wide to account for narrow viewports on mobile devices. You may need to manually address the width and alignment of individual form controls with spacing utilities (as shown below). Lastly, be sure to always include a <Form.Label>
with each form control, even if you need to hide it from non-screenreader visitors with the srOnly
prop.
<Form inline>
<Form.Label htmlFor="inlineFormInputName2" srOnly>
Name
</Form.Label>
<Form.Control
className="mb-2 mr-sm-2"
id="inlineFormInputName2"
placeholder="Jane Doe"
/>
<Form.Label htmlFor="inlineFormInputGroupUsername2" srOnly>
Username
</Form.Label>
<InputGroup className="mb-2 mr-sm-2">
<InputGroup.Prepend>
<InputGroup.Text>@</InputGroup.Text>
</InputGroup.Prepend>
<FormControl id="inlineFormInputGroupUsername2" placeholder="Username" />
</InputGroup>
<Form.Check
type="checkbox"
className="mb-2 mr-sm-2"
id="inlineFormCheck"
label="Remember me"
/>
<Button type="submit" className="mb-2">
Submit
</Button>
</Form> < Form inline >
< Form.Label htmlFor = " inlineFormInputName2 " srOnly >
Name
</ Form.Label >
< Form.Control
className = " mb-2 mr-sm-2 "
id = " inlineFormInputName2 "
placeholder = " Jane Doe "
/>
< Form.Label htmlFor = " inlineFormInputGroupUsername2 " srOnly >
Username
</ Form.Label >
< InputGroup className = " mb-2 mr-sm-2 " >
< InputGroup.Prepend >
< InputGroup.Text > @ </ InputGroup.Text >
</ InputGroup.Prepend >
< FormControl id = " inlineFormInputGroupUsername2 " placeholder = " Username " />
</ InputGroup >
< Form.Check
type = " checkbox "
className = " mb-2 mr-sm-2 "
id = " inlineFormCheck "
label = " Remember me "
/>
< Button type = " submit " className = " mb-2 " >
Submit
</ Button >
</ Form >
Custom form controls and selects are also supported.
<Form inline>
<Form.Label className="my-1 mr-2" htmlFor="inlineFormCustomSelectPref">
Preference
</Form.Label>
<Form.Control
as="select"
className="my-1 mr-sm-2"
id="inlineFormCustomSelectPref"
custom
>
<option value="0">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Control>
<Form.Check
type="checkbox"
className="my-1 mr-sm-2"
id="customControlInline"
label="Remember my preference"
custom
/>
<Button type="submit" className="my-1">
Submit
</Button>
</Form> < Form inline >
< Form.Label className = " my-1 mr-2 " htmlFor = " inlineFormCustomSelectPref " >
Preference
</ Form.Label >
< Form.Control
as = " select "
className = " my-1 mr-sm-2 "
id = " inlineFormCustomSelectPref "
custom
>
< option value = " 0 " > Choose ... </ option >
< option value = " 1 " > One </ option >
< option value = " 2 " > Two </ option >
< option value = " 3 " > Three </ option >
</ Form.Control >
< Form.Check
type = " checkbox "
className = " my-1 mr-sm-2 "
id = " customControlInline "
label = " Remember my preference "
custom
/>
< Button type = " submit " className = " my-1 " >
Submit
</ Button >
</ Form >
Alternatives to hidden labels Assistive technologies such as screen readers will have trouble with your forms if you don’t include a label for every input. For these inline forms, you can hide the labels using the srOnly
prop. There are further alternative methods of providing a label for assistive technologies, such as the aria-label
, aria-labelledby
or title
attribute. If none of these are present, assistive technologies may resort to using the placeholder
attribute, if present, but note that use of placeholder
as a replacement for other labelling methods is not advised.Help text# Block-level help text in forms can be created using <Form.Text>
. Inline help text can be flexibly implemented using any inline HTML element and utility classes like.text-muted
.
Associating help text with form controls Help text should be explicitly associated with the form control it relates to using the aria-describedby
attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses or enters the control.Help text below inputs can be styled with <Form.Text>
. This component includes display: block
and adds some top margin for easy spacing from the inputs above.
<>
<Form.Label htmlFor="inputPassword5">Password</Form.Label>
<Form.Control
type="password"
id="inputPassword5"
aria-describedby="passwordHelpBlock"
/>
<Form.Text id="passwordHelpBlock" muted>
Your password must be 8-20 characters long, contain letters and numbers, and
must not contain spaces, special characters, or emoji.
</Form.Text>
</> < >
< Form.Label htmlFor = " inputPassword5 " > Password </ Form.Label >
< Form.Control
type = " password "
id = " inputPassword5 "
aria-describedby = " passwordHelpBlock "
/>
< Form.Text id = " passwordHelpBlock " muted >
Your password must be 8 - 20 characters long , contain letters and numbers , and
must not contain spaces , special characters , or emoji .
</ Form.Text >
</ >
Inline text can use any typical inline HTML element (be it a <small>
, <span>
, or something else) with nothing more than a utility class.
<Form inline>
<Form.Group>
<Form.Label htmlFor="inputPassword6">Password</Form.Label>
<Form.Control
type="password"
className="mx-sm-3"
id="inputPassword6"
aria-describedby="passwordHelpInline"
/>
<Form.Text id="passwordHelpInline" muted>
Must be 8-20 characters long.
</Form.Text>
</Form.Group>
</Form> < Form inline >
< Form.Group >
< Form.Label htmlFor = " inputPassword6 " > Password </ Form.Label >
< Form.Control
type = " password "
className = " mx-sm-3 "
id = " inputPassword6 "
aria-describedby = " passwordHelpInline "
/>
< Form.Text id = " passwordHelpInline " muted >
Must be 8 - 20 characters long .
</ Form.Text >
</ Form.Group >
</ Form >
Add the disabled
boolean attribute on an input to prevent user interactions and make it appear lighter.
<>
<Form.Group>
<Form.Label>Disabled input</Form.Label>
<Form.Control placeholder="Disabled input" disabled />
</Form.Group>
<Form.Group>
<Form.Label>Disabled select menu</Form.Label>
<Form.Control as="select" disabled>
<option>Disabled select</option>
</Form.Control>
</Form.Group>
<Form.Group>
<Form.Check type="checkbox" label="Can't check this" disabled />
</Form.Group>
</> < >
< Form.Group >
< Form.Label > Disabled input </ Form.Label >
< Form.Control placeholder = " Disabled input " disabled />
</ Form.Group >
< Form.Group >
< Form.Label > Disabled select menu </ Form.Label >
< Form.Control as = " select " disabled >
< option > Disabled select </ option >
</ Form.Control >
</ Form.Group >
< Form.Group >
< Form.Check type = " checkbox " label = " Can't check this " disabled />
</ Form.Group >
</ >
Add the disabled
attribute to a <fieldset>
to disable all the controls within.
<Form>
<fieldset disabled>
<Form.Group>
<Form.Label htmlFor="disabledTextInput">Disabled input</Form.Label>
<Form.Control id="disabledTextInput" placeholder="Disabled input" />
</Form.Group>
<Form.Group>
<Form.Label htmlFor="disabledSelect">Disabled select menu</Form.Label>
<Form.Control as="select" id="disabledSelect">
<option>Disabled select</option>
</Form.Control>
</Form.Group>
<Form.Group>
<Form.Check
type="checkbox"
id="disabledFieldsetCheck"
label="Can't check this"
/>
</Form.Group>
<Button type="submit">Submit</Button>
</fieldset>
</Form> < Form >
< fieldset disabled >
< Form.Group >
< Form.Label htmlFor = " disabledTextInput " > Disabled input </ Form.Label >
< Form.Control id = " disabledTextInput " placeholder = " Disabled input " />
</ Form.Group >
< Form.Group >
< Form.Label htmlFor = " disabledSelect " > Disabled select menu </ Form.Label >
< Form.Control as = " select " id = " disabledSelect " >
< option > Disabled select </ option >
</ Form.Control >
</ Form.Group >
< Form.Group >
< Form.Check
type = " checkbox "
id = " disabledFieldsetCheck "
label = " Can't check this "
/>
</ Form.Group >
< Button type = " submit " > Submit </ Button >
</ fieldset >
</ Form >
Caveat with anchors By default, browsers will treat all native form controls (
<input>
,
<select>
and
<button>
elements) inside a
<fieldset disabled>
as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes
<a ... class="btn btn-*">
elements, these will only be given a style of
pointer-events: none
. As noted in the section about
disabled state for buttons (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn’t fully supported in Internet Explorer 10, and won’t prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
Cross-browser compatibility While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don’t fully support the disabled
attribute on a <fieldset>
. Use custom JavaScript to disable the fieldset in these browsers.Provide valuable, actionable feedback to your users with form validation feedback.
For native HTML form validation–available in all our supported browsers , the :valid
and :invalid
pseudo selectors are used to apply validation styles as well as display feedback messages.
Bootstrap scopes the :valid
and :invalid
styles to parent .was-validated
class, usually applied to the <Form>
(you can use the validated
prop as a shortcut). Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).
Watch out! Browsers provide their own validation UI by default on form
s. You can disable the default UI by adding the HTML noValidate
attribute to your <Form>
or <form>
element.
function FormExample() {
const [validated, setValidated] = useState(false);
const handleSubmit = (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
};
return (
<Form noValidate validated={validated} onSubmit={handleSubmit}>
<Form.Row>
<Form.Group as={Col} md="4" controlId="validationCustom01">
<Form.Label>First name</Form.Label>
<Form.Control
required
type="text"
placeholder="First name"
defaultValue="Mark"
/>
<Form.Control.Feedback>Looks good!</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="4" controlId="validationCustom02">
<Form.Label>Last name</Form.Label>
<Form.Control
required
type="text"
placeholder="Last name"
defaultValue="Otto"
/>
<Form.Control.Feedback>Looks good!</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="4" controlId="validationCustomUsername">
<Form.Label>Username</Form.Label>
<InputGroup hasValidation>
<InputGroup.Prepend>
<InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
</InputGroup.Prepend>
<Form.Control
type="text"
placeholder="Username"
aria-describedby="inputGroupPrepend"
required
/>
<Form.Control.Feedback type="invalid">
Please choose a username.
</Form.Control.Feedback>
</InputGroup>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col} md="6" controlId="validationCustom03">
<Form.Label>City</Form.Label>
<Form.Control type="text" placeholder="City" required />
<Form.Control.Feedback type="invalid">
Please provide a valid city.
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="3" controlId="validationCustom04">
<Form.Label>State</Form.Label>
<Form.Control type="text" placeholder="State" required />
<Form.Control.Feedback type="invalid">
Please provide a valid state.
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="3" controlId="validationCustom05">
<Form.Label>Zip</Form.Label>
<Form.Control type="text" placeholder="Zip" required />
<Form.Control.Feedback type="invalid">
Please provide a valid zip.
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Group>
<Form.Check
required
label="Agree to terms and conditions"
feedback="You must agree before submitting."
/>
</Form.Group>
<Button type="submit">Submit form</Button>
</Form>
);
}
render(<FormExample />); function FormExample ( ) {
const [ validated , setValidated ] = useState ( false ) ;
const handleSubmit = ( event ) => {
const form = event . currentTarget ;
if ( form . checkValidity ( ) === false ) {
event . preventDefault ( ) ;
event . stopPropagation ( ) ;
}
setValidated ( true ) ;
} ;
return (
< Form noValidate validated = { validated } onSubmit = { handleSubmit } >
< Form.Row >
< Form.Group as = { Col } md = " 4 " controlId = " validationCustom01 " >
< Form.Label > First name </ Form.Label >
< Form.Control
required
type = " text "
placeholder = " First name "
defaultValue = " Mark "
/>
< Form.Control.Feedback > Looks good ! </ Form.Control.Feedback >
</ Form.Group >
< Form.Group as = { Col } md = " 4 " controlId = " validationCustom02 " >
< Form.Label > Last name </ Form.Label >
< Form.Control
required
type = " text "
placeholder = " Last name "
defaultValue = " Otto "
/>
< Form.Control.Feedback > Looks good ! </ Form.Control.Feedback >
</ Form.Group >
< Form.Group as = { Col } md = " 4 " controlId = " validationCustomUsername " >
< Form.Label > Username </ Form.Label >
< InputGroup hasValidation >
< InputGroup.Prepend >
< InputGroup.Text id = " inputGroupPrepend " > @ </ InputGroup.Text >
</ InputGroup.Prepend >
< Form.Control
type = " text "
placeholder = " Username "
aria-describedby = " inputGroupPrepend "
required
/>
< Form.Control.Feedback type = " invalid " >
Please choose a username .
</ Form.Control.Feedback >
</ InputGroup >
</ Form.Group >
</ Form.Row >
< Form.Row >
< Form.Group as = { Col } md = " 6 " controlId = " validationCustom03 " >
< Form.Label > City </ Form.Label >
< Form.Control type = " text " placeholder = " City " required />
< Form.Control.Feedback type = " invalid " >
Please provide a valid city .
</ Form.Control.Feedback >
</ Form.Group >
< Form.Group as = { Col } md = " 3 " controlId = " validationCustom04 " >
< Form.Label > State </ Form.Label >
< Form.Control type = " text " placeholder = " State " required />
< Form.Control.Feedback type = " invalid " >
Please provide a valid state .
</ Form.Control.Feedback >
</ Form.Group >
< Form.Group as = { Col } md = " 3 " controlId = " validationCustom05 " >
< Form.Label > Zip </ Form.Label >
< Form.Control type = " text " placeholder = " Zip " required />
< Form.Control.Feedback type = " invalid " >
Please provide a valid zip .
</ Form.Control.Feedback >
</ Form.Group >
</ Form.Row >
< Form.Group >
< Form.Check
required
label = " Agree to terms and conditions "
feedback = " You must agree before submitting. "
/>
</ Form.Group >
< Button type = " submit " > Submit form </ Button >
</ Form >
) ;
}
render ( < FormExample /> ) ;
It's often beneficial (especially in React) to handle form validation via a library like Formik, or react-formal. In those cases, isValid
and isInvalid
props can be added to form controls to manually apply validation styles. Below is a quick example integrating with Formik .
const { Formik } = formik;
const schema = yup.object().shape({
firstName: yup.string().required(),
lastName: yup.string().required(),
username: yup.string().required(),
city: yup.string().required(),
state: yup.string().required(),
zip: yup.string().required(),
terms: yup.bool().required().oneOf([true], 'Terms must be accepted'),
});
function FormExample() {
return (
<Formik
validationSchema={schema}
onSubmit={console.log}
initialValues={{
firstName: 'Mark',
lastName: 'Otto',
username: '',
city: '',
state: '',
zip: '',
terms: false,
}}
>
{({
handleSubmit,
handleChange,
handleBlur,
values,
touched,
isValid,
errors,
}) => (
<Form noValidate onSubmit={handleSubmit}>
<Form.Row>
<Form.Group as={Col} md="4" controlId="validationFormik01">
<Form.Label>First name</Form.Label>
<Form.Control
type="text"
name="firstName"
value={values.firstName}
onChange={handleChange}
isValid={touched.firstName && !errors.firstName}
/>
<Form.Control.Feedback>Looks good!</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="4" controlId="validationFormik02">
<Form.Label>Last name</Form.Label>
<Form.Control
type="text"
name="lastName"
value={values.lastName}
onChange={handleChange}
isValid={touched.lastName && !errors.lastName}
/>
<Form.Control.Feedback>Looks good!</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="4" controlId="validationFormikUsername">
<Form.Label>Username</Form.Label>
<InputGroup hasValidation>
<InputGroup.Prepend>
<InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
</InputGroup.Prepend>
<Form.Control
type="text"
placeholder="Username"
aria-describedby="inputGroupPrepend"
name="username"
value={values.username}
onChange={handleChange}
isInvalid={!!errors.username}
/>
<Form.Control.Feedback type="invalid">
{errors.username}
</Form.Control.Feedback>
</InputGroup>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col} md="6" controlId="validationFormik03">
<Form.Label>City</Form.Label>
<Form.Control
type="text"
placeholder="City"
name="city"
value={values.city}
onChange={handleChange}
isInvalid={!!errors.city}
/>
<Form.Control.Feedback type="invalid">
{errors.city}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="3" controlId="validationFormik04">
<Form.Label>State</Form.Label>
<Form.Control
type="text"
placeholder="State"
name="state"
value={values.state}
onChange={handleChange}
isInvalid={!!errors.state}
/>
<Form.Control.Feedback type="invalid">
{errors.state}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="3" controlId="validationFormik05">
<Form.Label>Zip</Form.Label>
<Form.Control
type="text"
placeholder="Zip"
name="zip"
value={values.zip}
onChange={handleChange}
isInvalid={!!errors.zip}
/>
<Form.Control.Feedback type="invalid">
{errors.zip}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Group>
<Form.Check
required
name="terms"
label="Agree to terms and conditions"
onChange={handleChange}
isInvalid={!!errors.terms}
feedback={errors.terms}
id="validationFormik0"
/>
</Form.Group>
<Button type="submit">Submit form</Button>
</Form>
)}
</Formik>
);
}
render(<FormExample />); const { Formik } = formik ;
const schema = yup . object ( ) . shape ( {
firstName : yup . string ( ) . required ( ) ,
lastName : yup . string ( ) . required ( ) ,
username : yup . string ( ) . required ( ) ,
city : yup . string ( ) . required ( ) ,
state : yup . string ( ) . required ( ) ,
zip : yup . string ( ) . required ( ) ,
terms : yup . bool ( ) . required ( ) . oneOf ( [ true ] , 'Terms must be accepted' ) ,
} ) ;
function FormExample ( ) {
return (
< Formik
validationSchema = { schema }
onSubmit = { console . log }
initialValues = { {
firstName : 'Mark' ,
lastName : 'Otto' ,
username : '' ,
city : '' ,
state : '' ,
zip : '' ,
terms : false ,
} }
>
{ ( {
handleSubmit ,
handleChange ,
handleBlur ,
values ,
touched ,
isValid ,
errors ,
} ) => (
< Form noValidate onSubmit = { handleSubmit } >
< Form.Row >
< Form.Group as = { Col } md = " 4 " controlId = " validationFormik01 " >
< Form.Label > First name </ Form.Label >
< Form.Control
type = " text "
name = " firstName "
value = { values . firstName }
onChange = { handleChange }
isValid = { touched . firstName && ! errors . firstName }
/>
< Form.Control.Feedback > Looks good ! </ Form.Control.Feedback >
</ Form.Group >
< Form.Group as = { Col } md = " 4 " controlId = " validationFormik02 " >
< Form.Label > Last name </ Form.Label >
< Form.Control
type = " text "
name = " lastName "
value = { values . lastName }
onChange = { handleChange }
isValid = { touched . lastName && ! errors . lastName }
/>
< Form.Control.Feedback > Looks good ! </ Form.Control.Feedback >
</ Form.Group >
< Form.Group as = { Col } md = " 4 " controlId = " validationFormikUsername " >
< Form.Label > Username </ Form.Label >
< InputGroup hasValidation >
< InputGroup.Prepend >
< InputGroup.Text id = " inputGroupPrepend " > @ </ InputGroup.Text >
</ InputGroup.Prepend >
< Form.Control
type = " text "
placeholder = " Username "
aria-describedby = " inputGroupPrepend "
name = " username "
value = { values . username }
onChange = { handleChange }
isInvalid = { ! ! errors . username }
/>
< Form.Control.Feedback type = " invalid " >
{ errors . username }
</ Form.Control.Feedback >
</ InputGroup >
</ Form.Group >
</ Form.Row >
< Form.Row >
< Form.Group as = { Col } md = " 6 " controlId = " validationFormik03 " >
< Form.Label > City </ Form.Label >
< Form.Control
type = " text "
placeholder = " City "
name = " city "
value = { values . city }
onChange = { handleChange }
isInvalid = { ! ! errors . city }
/>
< Form.Control.Feedback type = " invalid " >
{ errors . city }
</ Form.Control.Feedback >
</ Form.Group >
< Form.Group as = { Col } md = " 3 " controlId = " validationFormik04 " >
< Form.Label > State </ Form.Label >
< Form.Control
type = " text "
placeholder = " State "
name = " state "
value = { values . state }
onChange = { handleChange }
isInvalid = { ! ! errors . state }
/>
< Form.Control.Feedback type = " invalid " >
{ errors . state }
</ Form.Control.Feedback >
</ Form.Group >
< Form.Group as = { Col } md = " 3 " controlId = " validationFormik05 " >
< Form.Label > Zip </ Form.Label >
< Form.Control
type = " text "
placeholder = " Zip "
name = " zip "
value = { values . zip }
onChange = { handleChange }
isInvalid = { ! ! errors . zip }
/>
< Form.Control.Feedback type = " invalid " >
{ errors . zip }
</ Form.Control.Feedback >
</ Form.Group >
</ Form.Row >
< Form.Group >
< Form.Check
required
name = " terms "
label = " Agree to terms and conditions "
onChange = { handleChange }
isInvalid = { ! ! errors . terms }
feedback = { errors . terms }
id = " validationFormik0 "
/>
</ Form.Group >
< Button type = " submit " > Submit form </ Button >
</ Form >
) }
</ Formik >
) ;
}
render ( < FormExample /> ) ;
If your form layout allows it, you can use the tooltip
prop to display validation feedback in a styled tooltip. Be sure to have a parent with position: relative
on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.
const { Formik } = formik;
const schema = yup.object().shape({
firstName: yup.string().required(),
lastName: yup.string().required(),
username: yup.string().required(),
city: yup.string().required(),
state: yup.string().required(),
zip: yup.string().required(),
file: yup.mixed().required(),
terms: yup.bool().required().oneOf([true], 'terms must be accepted'),
});
function FormExample() {
return (
<Formik
validationSchema={schema}
onSubmit={console.log}
initialValues={{
firstName: 'Mark',
lastName: 'Otto',
username: '',
city: '',
state: '',
zip: '',
file: null,
terms: false,
}}
>
{({
handleSubmit,
handleChange,
handleBlur,
values,
touched,
isValid,
errors,
}) => (
<Form noValidate onSubmit={handleSubmit}>
<Form.Row>
<Form.Group as={Col} md="4" controlId="validationFormik101">
<Form.Label>First name</Form.Label>
<Form.Control
type="text"
name="firstName"
value={values.firstName}
onChange={handleChange}
isValid={touched.firstName && !errors.firstName}
/>
<Form.Control.Feedback tooltip>Looks good!</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="4" controlId="validationFormik102">
<Form.Label>Last name</Form.Label>
<Form.Control
type="text"
name="lastName"
value={values.lastName}
onChange={handleChange}
isValid={touched.lastName && !errors.lastName}
/>
<Form.Control.Feedback tooltip>Looks good!</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="4" controlId="validationFormikUsername2">
<Form.Label>Username</Form.Label>
<InputGroup hasValidation>
<InputGroup.Prepend>
<InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
</InputGroup.Prepend>
<Form.Control
type="text"
placeholder="Username"
aria-describedby="inputGroupPrepend"
name="username"
value={values.username}
onChange={handleChange}
isInvalid={!!errors.username}
/>
<Form.Control.Feedback type="invalid" tooltip>
{errors.username}
</Form.Control.Feedback>
</InputGroup>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col} md="6" controlId="validationFormik103">
<Form.Label>City</Form.Label>
<Form.Control
type="text"
placeholder="City"
name="city"
value={values.city}
onChange={handleChange}
isInvalid={!!errors.city}
/>
<Form.Control.Feedback type="invalid" tooltip>
{errors.city}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="3" controlId="validationFormik104">
<Form.Label>State</Form.Label>
<Form.Control
type="text"
placeholder="State"
name="state"
value={values.state}
onChange={handleChange}
isInvalid={!!errors.state}
/>
<Form.Control.Feedback type="invalid" tooltip>
{errors.state}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="3" controlId="validationFormik105">
<Form.Label>Zip</Form.Label>
<Form.Control
type="text"
placeholder="Zip"
name="zip"
value={values.zip}
onChange={handleChange}
isInvalid={!!errors.zip}
/>
<Form.Control.Feedback type="invalid" tooltip>
{errors.zip}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Group>
<Form.File
className="position-relative"
required
name="file"
label="File"
onChange={handleChange}
isInvalid={!!errors.file}
feedback={errors.file}
id="validationFormik107"
feedbackTooltip
/>
</Form.Group>
<Form.Group>
<Form.Check
required
name="terms"
label="Agree to terms and conditions"
onChange={handleChange}
isInvalid={!!errors.terms}
feedback={errors.terms}
id="validationFormik106"
feedbackTooltip
/>
</Form.Group>
<Button type="submit">Submit form</Button>
</Form>
)}
</Formik>
);
}
render(<FormExample />); const { Formik } = formik ;
const schema = yup . object ( ) . shape ( {
firstName : yup . string ( ) . required ( ) ,
lastName : yup . string ( ) . required ( ) ,
username : yup . string ( ) . required ( ) ,
city : yup . string ( ) . required ( ) ,
state : yup . string ( ) . required ( ) ,
zip : yup . string ( ) . required ( ) ,
file : yup . mixed ( ) . required ( ) ,
terms : yup . bool ( ) . required ( ) . oneOf ( [ true ] , 'terms must be accepted' ) ,
} ) ;
function FormExample ( ) {
return (
< Formik
validationSchema = { schema }
onSubmit = { console . log }
initialValues = { {
firstName : 'Mark' ,
lastName : 'Otto' ,
username : '' ,
city : '' ,
state : '' ,
zip : '' ,
file : null ,
terms : false ,
} }
>
{ ( {
handleSubmit ,
handleChange ,
handleBlur ,
values ,
touched ,
isValid ,
errors ,
} ) => (
< Form noValidate onSubmit = { handleSubmit } >
< Form.Row >
< Form.Group as = { Col } md = " 4 " controlId = " validationFormik101 " >
< Form.Label > First name </ Form.Label >
< Form.Control
type = " text "
name = " firstName "
value = { values . firstName }
onChange = { handleChange }
isValid = { touched . firstName && ! errors . firstName }
/>
< Form.Control.Feedback tooltip > Looks good ! </ Form.Control.Feedback >
</ Form.Group >
< Form.Group as = { Col } md = " 4 " controlId = " validationFormik102 " >
< Form.Label > Last name </ Form.Label >
< Form.Control
type = " text "
name = " lastName "
value = { values . lastName }
onChange = { handleChange }
isValid = { touched . lastName && ! errors . lastName }
/>
< Form.Control.Feedback tooltip > Looks good ! </ Form.Control.Feedback >
</ Form.Group >
< Form.Group as = { Col } md = " 4 " controlId = " validationFormikUsername2 " >
< Form.Label > Username </ Form.Label >
< InputGroup hasValidation >
< InputGroup.Prepend >
< InputGroup.Text id = " inputGroupPrepend " > @ </ InputGroup.Text >
</ InputGroup.Prepend >
< Form.Control
type = " text "
placeholder = " Username "
aria-describedby = " inputGroupPrepend "
name = " username "
value = { values . username }
onChange = { handleChange }
isInvalid = { ! ! errors . username }
/>
< Form.Control.Feedback type = " invalid " tooltip >
{ errors . username }
</ Form.Control.Feedback >
</ InputGroup >
</ Form.Group >
</ Form.Row >
< Form.Row >
< Form.Group as = { Col } md = " 6 " controlId = " validationFormik103 " >
< Form.Label > City </ Form.Label >
< Form.Control
type = " text "
placeholder = " City "
name = " city "
value = { values . city }
onChange = { handleChange }
isInvalid = { ! ! errors . city }
/>
< Form.Control.Feedback type = " invalid " tooltip >
{ errors . city }
</ Form.Control.Feedback >
</ Form.Group >
< Form.Group as = { Col } md = " 3 " controlId = " validationFormik104 " >
< Form.Label > State </ Form.Label >
< Form.Control
type = " text "
placeholder = " State "
name = " state "
value = { values . state }
onChange = { handleChange }
isInvalid = { ! ! errors . state }
/>
< Form.Control.Feedback type = " invalid " tooltip >
{ errors . state }
</ Form.Control.Feedback >
</ Form.Group >
< Form.Group as = { Col } md = " 3 " controlId = " validationFormik105 " >
< Form.Label > Zip </ Form.Label >
< Form.Control
type = " text "
placeholder = " Zip "
name = " zip "
value = { values . zip }
onChange = { handleChange }
isInvalid = { ! ! errors . zip }
/>
< Form.Control.Feedback type = " invalid " tooltip >
{ errors . zip }
</ Form.Control.Feedback >
</ Form.Group >
</ Form.Row >
< Form.Group >
< Form.File
className = " position-relative "
required
name = " file "
label = " File "
onChange = { handleChange }
isInvalid = { ! ! errors . file }
feedback = { errors . file }
id = " validationFormik107 "
feedbackTooltip
/>
</ Form.Group >
< Form.Group >
< Form.Check
required
name = " terms "
label = " Agree to terms and conditions "
onChange = { handleChange }
isInvalid = { ! ! errors . terms }
feedback = { errors . terms }
id = " validationFormik106 "
feedbackTooltip
/>
</ Form.Group >
< Button type = " submit " > Submit form </ Button >
</ Form >
) }
</ Formik >
) ;
}
render ( < FormExample /> ) ;
To properly show rounded corners in an <InputGroup>
with validation, the <InputGroup>
requires the hasValidation
prop.
<InputGroup hasValidation>
<InputGroup.Prepend>
<InputGroup.Text>@</InputGroup.Text>
</InputGroup.Prepend>
<Form.Control type="text" required isInvalid />
<Form.Control.Feedback type="invalid">
Please choose a username.
</Form.Control.Feedback>
</InputGroup> < InputGroup hasValidation >
< InputGroup.Prepend >
< InputGroup.Text > @ </ InputGroup.Text >
</ InputGroup.Prepend >
< Form.Control type = " text " required isInvalid />
< Form.Control.Feedback type = " invalid " >
Please choose a username .
</ Form.Control.Feedback >
</ InputGroup >
For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.
Custom checkbox and radio styles are achieved with a resourceful use of the :checked
selector and :after
pseudo elements, but are Structurally similar to the default FormCheck
. By default the checked and indeterminate icons use embedded svg icons from Open Iconic .
Apply Bootstrap's custom elements by adding the custom
prop.
<Form>
{['checkbox', 'radio'].map((type) => (
<div key={`custom-${type}`} className="mb-3">
<Form.Check
custom
type={type}
id={`custom-${type}`}
label={`Check this custom ${type}`}
/>
<Form.Check
custom
disabled
type={type}
label={`disabled ${type}`}
id={`disabled-custom-${type}`}
/>
</div>
))}
</Form> < Form >
{ [ 'checkbox' , 'radio' ] . map ( ( type ) => (
< div key = { ` custom- ${ type } ` } className = " mb-3 " >
< Form.Check
custom
type = { type }
id = { ` custom- ${ type } ` }
label = { ` Check this custom ${ type } ` }
/>
< Form.Check
custom
disabled
type = { type }
label = { ` disabled ${ type } ` }
id = { ` disabled-custom- ${ type } ` }
/>
</ div >
) ) }
</ Form >
A switch has the markup of a custom checkbox but uses type="switch"
to render a toggle switch. Switches also support the same customizable children as <FormCheck>
.
<Form>
<Form.Check
type="switch"
id="custom-switch"
label="Check this switch"
/>
<Form.Check
disabled
type="switch"
label="disabled switch"
id="disabled-custom-switch"
/>
</Form> < Form >
< Form.Check
type = " switch "
id = " custom-switch "
label = " Check this switch "
/>
< Form.Check
disabled
type = " switch "
label = " disabled switch "
id = " disabled-custom-switch "
/>
</ Form >
You can also use the <Form.Switch>
alias which encapsulates the above, in a very small component wrapper.
Watch out! You must specify an id
when using custom check controls or switches. Event handlers are triggered by linking the label with the input via id
.Inline <Form>
{['checkbox', 'radio'].map((type) => (
<div key={`custom-inline-${type}`} className="mb-3">
<Form.Check
custom
inline
label="1"
type={type}
id={`custom-inline-${type}-1`}
/>
<Form.Check
custom
inline
label="2"
type={type}
id={`custom-inline-${type}-2`}
/>
<Form.Check
custom
inline
disabled
label="3 (disabled)"
type={type}
id={`custom-inline-${type}-3`}
/>
</div>
))}
</Form> < Form >
{ [ 'checkbox' , 'radio' ] . map ( ( type ) => (
< div key = { ` custom-inline- ${ type } ` } className