<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
<FormGroup>, and use
<FormLabel> for the label.
<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
FormControl component. FormControl adds some additional styles for general appearance, focus state, sizing, and more.
<FormLabel> to change the size of inputs and labels respectively.
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.
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.
Checkboxes and Radios
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.
Group checkboxes or radios on the same horizontal row by adding the
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!
Customizing FormCheck rendering
When you need tighter control, or want to customize how the
FormCheck component renders, it may better to use it's constituent parts directly.
children to the
FormCheck you can forgo the default rendering and handle it yourself. (You can still provide an
id to the
FormGroup and have it propagate to the label and input).
<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.
You may also choose from small and large custom selects to match our similarly sized text inputs.
<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
<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).
<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.
When working with the Bootstrap grid system, be sure to place form elements within column classes.
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.
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
divs, or nearly any other element.
You also add the
controlId prop to accessibly wire the nested label and input together via the
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.
More complex layouts can also be created with the grid system.
Horizontal form label sizing
You can size the
<FormLabel> using the column prop as shown.
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
The example below uses a flexbox utility to vertically center the contents and changes
<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.
You can then remix that once again with size-specific column classes.
And of course custom form controls are supported.
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
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.
disabled boolean attribute on an input to prevent user interactions and make it appear lighter.
disabled attribute to a
<fieldset> to disable all the controls within.
Provide valuable, actionable feedback to your users with form validation feedback.
Native HTML5 form validation
For native HTML form validation–available in all our supported browsers, the
:invalid pseudo selectors are used to apply validation styles as well as display feedback messages.
Bootstrap scopes the
: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).
Form libraries and server-rendered styles
It's often beneficial (especially in React) to handle form validation via a library like Formik, or react-formal. In those cases,
isInvalid props can be added to form controls to manually apply validation styles. Below is a quick example integrating with Formik.
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.