Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Overview

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.

Result

Loading...

Live Editor

import Button from 'react-bootstrap/Button'; import Form from 'react-bootstrap/Form'; function BasicExample() { return ( <Form> <Form.Group className="mb-3" 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 className="mb-3" controlId="formBasicPassword"> <Form.Label>Password</Form.Label> <Form.Control type="password" placeholder="Password" /> </Form.Group> <Form.Group className="mb-3" controlId="formBasicCheckbox"> <Form.Check type="checkbox" label="Check me out" /> </Form.Group> <Button variant="primary" type="submit"> Submit </Button> </Form> ); } export default BasicExample;

import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';

function BasicExample() {
  return (
    <Form>
      <Form.Group className="mb-3" 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 className="mb-3" controlId="formBasicPassword">
        <Form.Label>Password</Form.Label>
        <Form.Control type="password" placeholder="Password" />
      </Form.Group>
      <Form.Group className="mb-3" controlId="formBasicCheckbox">
        <Form.Check type="checkbox" label="Check me out" />
      </Form.Group>
      <Button variant="primary" type="submit">
        Submit
      </Button>
    </Form>
  );
}

export default BasicExample;

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.

Disabled forms

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

Result

Loading...

Live Editor

import Form from 'react-bootstrap/Form'; function FormDisabledInputExample() { return ( <> <Form.Group className="mb-3"> <Form.Label>Disabled input</Form.Label> <Form.Control placeholder="Disabled input" disabled /> </Form.Group> <Form.Group className="mb-3"> <Form.Label>Disabled select menu</Form.Label> <Form.Select disabled> <option>Disabled select</option> </Form.Select> </Form.Group> <Form.Group className="mb-3"> <Form.Check type="checkbox" label="Can't check this" disabled /> </Form.Group> </> ); } export default FormDisabledInputExample;

import Form from 'react-bootstrap/Form';

function FormDisabledInputExample() {
  return (
    <>
      <Form.Group className="mb-3">
        <Form.Label>Disabled input</Form.Label>
        <Form.Control placeholder="Disabled input" disabled />
      </Form.Group>
      <Form.Group className="mb-3">
        <Form.Label>Disabled select menu</Form.Label>
        <Form.Select disabled>
          <option>Disabled select</option>
        </Form.Select>
      </Form.Group>
      <Form.Group className="mb-3">
        <Form.Check type="checkbox" label="Can't check this" disabled />
      </Form.Group>
    </>
  );
}

export default FormDisabledInputExample;

Add the disabled attribute to a <fieldset> to disable all the controls within.

Result

Loading...

Live Editor

import Button from 'react-bootstrap/Button'; import Form from 'react-bootstrap/Form'; function FormDisabledExample() { return ( <Form> <fieldset disabled> <Form.Group className="mb-3"> <Form.Label htmlFor="disabledTextInput">Disabled input</Form.Label> <Form.Control id="disabledTextInput" placeholder="Disabled input" /> </Form.Group> <Form.Group className="mb-3"> <Form.Label htmlFor="disabledSelect">Disabled select menu</Form.Label> <Form.Select id="disabledSelect"> <option>Disabled select</option> </Form.Select> </Form.Group> <Form.Group className="mb-3"> <Form.Check type="checkbox" id="disabledFieldsetCheck" label="Can't check this" /> </Form.Group> <Button type="submit">Submit</Button> </fieldset> </Form> ); } export default FormDisabledExample;

import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';

function FormDisabledExample() {
  return (
    <Form>
      <fieldset disabled>
        <Form.Group className="mb-3">
          <Form.Label htmlFor="disabledTextInput">Disabled input</Form.Label>
          <Form.Control id="disabledTextInput" placeholder="Disabled input" />
        </Form.Group>
        <Form.Group className="mb-3">
          <Form.Label htmlFor="disabledSelect">Disabled select menu</Form.Label>
          <Form.Select id="disabledSelect">
            <option>Disabled select</option>
          </Form.Select>
        </Form.Group>
        <Form.Group className="mb-3">
          <Form.Check
            type="checkbox"
            id="disabledFieldsetCheck"
            label="Can't check this"
          />
        </Form.Group>
        <Button type="submit">Submit</Button>
      </fieldset>
    </Form>
  );
}

export default FormDisabledExample;

Browsers treat all native form controls (<input>, <select> and <button> elements) inside <fieldset disabled> as disabled, preventing both keyboard and mouse interactions on them.

However, if your form also includes custom button-like elements such as <a ... class="btn btn-*">, these will only be given a style of pointer-events: none, 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 focus and aria-disabled="disabled" to signal their state to assistive technologies.

API

Form

FormLabel