Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
<FormControl> component renders a form control with Bootstrap styling.
<FormGroup> component wraps a form control with proper spacing, along
with support for a label, help text, and validation state. To ensure
<FormGroup>, and use
<FormControl> component directly renders the
<input> or other specified
component. If you need to access the value of an uncontrolled
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.
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.
Browsers treat all native form controls (
<fieldset disabled> as disabled, preventing both keyboard and mouse interactions
However, if your form also includes custom button-like elements such as
<a ... class="btn btn-*">, these will only be given a style of
meaning they are still focusable and operable using the keyboard. In this case, you must
manually modify these controls by adding
tabindex="-1" to prevent them from receiving
aria-disabled="disabled" to signal their state to assistive technologies.