- The {' component renders a form control with
- Bootstrap styling. The {' 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 {', and use{' '}
- {' for the label.
-
- The {' component directly renders the{' '}
- {''} or other specified component. If you need to
- access the value of an uncontrolled {',
- 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.
-
- Use size on {' and{' '}
- {' to change the size of inputs and labels
- respectively.
-
- 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.
-
- 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{' '}
- inline prop.
-
- 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).
-
{''} controls with
- {''} . 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. -
-
- Wrap a {' element in{' '}
- {' to enable floating labels with
- Bootstrap’s textual form fields. A placeholder is required
- on each {' as our method of CSS-only
- floating labels uses the :placeholder-shown pseudo-element.
-
- By default, {'