You are currently viewing the auto-generated docs from the bs5-dev branch. The docs for the current release are available at https://react-bootstrap.github.io/
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.
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 inputs and textareas—use the FormControl component. FormControl adds some additional styles for general appearance, focus state, sizing, and more.
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.
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.
For the non-textual checkbox and radio controls, FormCheck provides a single component for both types that adds some additional styling and improved layout.
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!
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)=>(
<divkey={type}className="mb-3">
<Form.Checktype={type}id={`check-api-${type}`}>
<Form.Check.Inputtype={type}isValid/>
<Form.Check.Label>{`Custom api ${type}`}</Form.Check.Label>
<Form.Control.Feedbacktype="valid">You did it!</Form.Control.Feedback>
Create custom <input type="range"> controls with<FormRange>. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
Wrap a <Form.Control> element in <FloatingLabel> to enable floating labels with Bootstrap’s textual form fields. A placeholder is required on each <Form.Control> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element.
By default, <textarea>s will be the same height as <input>s. To set a custom height on your <textarea>, do not use the rows attribute. Instead, set an explicit height (either inline or via custom CSS).
Other than <Form.Control>, floating labels are only available on <Form.Select>s. They work in the same way, but unlike <input>s, they’ll always show the <label> in its floated state.
<FloatingLabelcontrolId="floatingSelect"label="Works with selects">
If you need greater control over the rendering, use the <FormFloating> component to wrap your input and label. Also note that the <Form.Control> must come first so we can utilize a sibling selector (e.g., ~).
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. Use it with fieldsets, divs, or nearly any other element.
You also add the controlId prop to accessibly wire the nested label and input together via the id.
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.Controlplaceholder="First name"/>
</Col>
<Col>
<Form.Controlplaceholder="Last name"/>
</Col>
</Row>
</Form>
More complex layouts can also be created with the grid system.
As shown in the previous examples, our grid system allows you to place any number of <Col>s within a <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}>.
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.
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.
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.
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
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).
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'),
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'),
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.
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>.
import Form from 'react-bootstrap/Form'Copy import code for the Form component
Name
Type
Default
Description
ref
ReactRef
The Form ref will be forwarded to the underlying element,
which means, unless it's rendered as a composite component,
it will be a DOM node, when resolved.
as
elementType
<form>
You can use a custom element type for this component.
validated
boolean
Mark a form as having been validated. Setting it to true will
toggle any validation styles on the forms elements.
import Form from 'react-bootstrap/Form'Copy import code for the Form component
Name
Type
Default
Description
as
elementType
<div>
You can use a custom element type for this component.
bsPrefix required
string
'form-floating'
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
import Form from 'react-bootstrap/Form'Copy import code for the Form component
Name
Type
Default
Description
ref
ReactRef
The FormGroup ref will be forwarded to the underlying element.
Unless the FormGroup is rendered as a composite component,
it will be a DOM node, when resolved.
as
elementType
<div>
You can use a custom element type for this component.
controlId
string
Sets id on <FormControl> and htmlFor on <FormGroup.Label>.
import Form from 'react-bootstrap/Form'Copy import code for the Form component
Name
Type
Default
Description
ref
ReactRef
The FormLabel ref will be forwarded to the underlying element.
Unless the FormLabel is rendered as a composite component,
it will be a DOM node, when resolved.
as
elementType
<label>
Set a custom element for this component
column
boolean | 'sm' | 'lg'
false
Renders the FormLabel as a <Col> component (accepting all the same props),
as well as adding additional styling for horizontal forms.
htmlFor
string
Uses controlId from <FormGroup> if not explicitly specified.
visuallyHidden
boolean
false
Hides the label visually while still allowing it to be
read by assistive technologies.
bsPrefix
string
'form-label'
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
import Form from 'react-bootstrap/Form'Copy import code for the Form component
Name
Type
Default
Description
ref
ReactRef
The FormText ref will be forwarded to the underlying element.
Unless the FormText is rendered as a composite component,
it will be a DOM node, when resolved.
as
elementType
<small>
You can use a custom element type for this component.
muted
boolean
A convenience prop for add the text-muted class,
since it's so commonly used here.
bsPrefix
string
'form-text'
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
import Form from 'react-bootstrap/Form'Copy import code for the Form component
Name
Type
Default
Description
ref
ReactRef
The FormControl ref will be forwarded to the underlying input element,
which means unless as is a composite component,
it will be a DOM node, when resolved.
as
'input' | 'textarea' | elementType
'input'
The underlying HTML element to use when rendering the FormControl.
disabled
boolean
Make the control disabled
htmlSize
number
The size attribute of the underlying HTML element.
Specifies the visible width in characters if as is 'input'.
id
string
Uses controlId from <FormGroup> if not explicitly specified.
isInvalid
boolean
false
Add "invalid" validation styles to the control and accompanying label
isValid
boolean
false
Add "valid" validation styles to the control
onChange
function
A callback fired when the value prop changes
plaintext
boolean
Render the input as plain text. Generally used along side readOnly.
readOnly
boolean
Make the control readonly
size
'sm' | 'lg'
Input size variants
type
string
The HTML input type, which is only relevant if as is 'input' (the default).
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
import Form from 'react-bootstrap/Form'Copy import code for the Form component
Name
Type
Default
Description
ref
ReactRef
The FormCheck ref will be forwarded to the underlying input element,
which means it will be a DOM node, when resolved.
as
'input' | elementType
'input'
The underlying HTML element to use when rendering the FormCheck.
children
node
Provide a function child to manually handle the layout of the FormCheck's inner components.
<FormCheck><FormCheck.InputisInvalidtype={radio}/><FormCheck.Label>Allow us to contact you?</FormCheck.Label><Feedbacktype="invalid">Yo this is required</Feedback></FormCheck>
disabled
boolean
false
Disables the control.
feedback
node
A message to display when the input is in a validation state
feedbackTooltip
boolean
false
Display feedback as a tooltip.
id
string
A HTML id attribute, necessary for proper form accessibility.
An id is recommended for allowing label clicks to toggle the check control.
This is required when type="switch" due to how they are rendered.
inline
boolean
false
Groups controls horizontally with other FormChecks.
isInvalid
boolean
false
Manually style the input as invalid
isValid
boolean
false
Manually style the input as valid
label
node
Label for the control.
title
string
''
title attribute for the underlying FormCheckLabel.
type
'radio' | 'checkbox' | 'switch'
'checkbox'
The type of checkable.
bsPrefix
string
'form-check'
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
import FormCheck from 'react-bootstrap/FormCheck'Copy import code for the FormCheck component
Name
Type
Default
Description
as
'input' | elementType
'input'
The underlying HTML element to use when rendering the FormCheckInput.
id
string
A HTML id attribute, necessary for proper form accessibility.
isInvalid
boolean
false
Manually style the input as invalid
isValid
boolean
false
Manually style the input as valid
type
'radio' | 'checkbox'
'checkbox'
The type of checkable.
bsPrefix
string
'form-check-input'
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
import FormCheck from 'react-bootstrap/FormCheck'Copy import code for the FormCheck component
Name
Type
Default
Description
htmlFor
string
The HTML for attribute for associating the label with an input
bsPrefix
string
'form-check-label'
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
