Forms
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.
<Form>
  <Form.Group 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 controlId="formBasicPassword">
    <Form.Label>Password</Form.Label>
    <Form.Control type="password" placeholder="Password" />
  </Form.Group>
  <Form.Group controlId="formBasicCheckbox">
    <Form.Check type="checkbox" label="Check me out" />
  </Form.Group>
  <Button variant="primary" type="submit">
    Submit
  </Button>
</Form>
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.
Form controls
For textual form controls—like inputs, selects, and textareas—use the FormControl component. FormControl adds some additional styles for general appearance, focus state, sizing, and more.
<Form>
  <Form.Group controlId="exampleForm.ControlInput1">
    <Form.Label>Email address</Form.Label>
    <Form.Control type="email" placeholder="williammiller@example.com" />
  </Form.Group>
  <Form.Group controlId="exampleForm.ControlSelect1">
    <Form.Label>Example select</Form.Label>
    <Form.Control as="select">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </Form.Control>
  </Form.Group>
  <Form.Group controlId="exampleForm.ControlSelect2">
    <Form.Label>Example multiple select</Form.Label>
    <Form.Control as="select" multiple>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </Form.Control>
  </Form.Group>
  <Form.Group controlId="exampleForm.ControlTextarea1">
    <Form.Label>Example textarea</Form.Label>
    <Form.Control as="textarea" rows={3} />
  </Form.Group>
</Form>
For file inputs, use Form.File.
<Form>
  <Form.Group>
    <Form.File id="exampleFormControlFile1" label="Example file input" />
  </Form.Group>
</Form>
Sizing
Use size on <FormControl> and <FormLabel> to change the size of inputs and labels respectively.
<Form.Group>
  <Form.Control size="lg" type="text" placeholder="Large text" />
  <br />
  <Form.Control type="text" placeholder="Normal text" />
  <br />
  <Form.Control size="sm" type="text" placeholder="Small text" />
</Form.Group>
<Form.Group>
  <Form.Control as="select" size="lg">
    <option>Large select</option>
  </Form.Control>
  <br />
  <Form.Control as="select">
    <option>Default select</option>
  </Form.Control>
  <br />
  <Form.Control size="sm" as="select">
    <option>Small select</option>
  </Form.Control>
</Form.Group>
Readonly
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.
<Form.Control type="text" placeholder="Readonly input here..." readOnly />
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.
<Form>
  <Form.Group as={Row} controlId="formPlaintextEmail">
    <Form.Label column sm="2">
      Email
    </Form.Label>
    <Col sm="10">
      <Form.Control plaintext readOnly defaultValue="williammiller@example.com" />
    </Col>
  </Form.Group>

  <Form.Group as={Row} controlId="formPlaintextPassword">
    <Form.Label column sm="2">
      Password
    </Form.Label>
    <Col sm="10">
      <Form.Control type="password" placeholder="Password" />
    </Col>
  </Form.Group>
</Form>
Range Inputs
<Form>
  <Form.Group controlId="formBasicRange">
    <Form.Label>Range</Form.Label>
    <Form.Control type="range" />
  </Form.Group>
</Form>
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.
Default (stacked)
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with FormCheck.
<Form>
  {['checkbox', 'radio'].map((type) => (
    <div key={`default-${type}`} className="mb-3">
      <Form.Check 
        type={type}
        id={`default-${type}`}
        label={`default ${type}`}
      />

      <Form.Check
        disabled
        type={type}
        label={`disabled ${type}`}
        id={`disabled-default-${type}`}
      />
    </div>
  ))}
</Form>
Inline
Group checkboxes or radios on the same horizontal row by adding the inline prop.
<Form>
  {['checkbox', 'radio'].map((type) => (
    <div key={`inline-${type}`} className="mb-3">
      <Form.Check inline label="1" type={type} id={`inline-${type}-1`} />
      <Form.Check inline label="2" type={type} id={`inline-${type}-2`} />
      <Form.Check
        inline
        disabled
        label="3 (disabled)"
        type={type}
        id={`inline-${type}-3`}
      />
    </div>
  ))}
</Form>
Without labels
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!
<>
  <Form.Check aria-label="option 1" />
  <Form.Check type="radio" aria-label="radio 1" />
</>
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.
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) => (
    <div key={type} className="mb-3">
      <Form.Check type={type} id={`check-api-${type}`}>
        <Form.Check.Input type={type} isValid />
        <Form.Check.Label>{`Custom api ${type}`}</Form.Check.Label>
        <Form.Control.Feedback type="valid">You did it!</Form.Control.Feedback>
      </Form.Check>
    </div>
  ))}
</Form>
Layout
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.
Form groups
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, but it picks up additional styles in <Form inline > as needed. 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.
<Form>
  <Form.Group controlId="formGroupEmail">
    <Form.Label>Email address</Form.Label>
    <Form.Control type="email" placeholder="Enter email" />
  </Form.Group>
  <Form.Group controlId="formGroupPassword">
    <Form.Label>Password</Form.Label>
    <Form.Control type="password" placeholder="Password" />
  </Form.Group>
</Form>
Form grid
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.Control placeholder="First name" />
    </Col>
    <Col>
      <Form.Control placeholder="Last name" />
    </Col>
  </Row>
</Form>
Form row
You may also swap <Row> for <Form.Row>, a variation of the standard grid row that overrides the default column gutters for tighter and more compact layouts.
<Form>
  <Form.Row>
    <Col>
      <Form.Control placeholder="First name" />
    </Col>
    <Col>
      <Form.Control placeholder="Last name" />
    </Col>
  </Form.Row>
</Form>
More complex layouts can also be created with the grid system.
<Form>
  <Form.Row>
    <Form.Group as={Col} controlId="formGridEmail">
      <Form.Label>Email</Form.Label>
      <Form.Control type="email" placeholder="Enter email" />
    </Form.Group>

    <Form.Group as={Col} controlId="formGridPassword">
      <Form.Label>Password</Form.Label>
      <Form.Control type="password" placeholder="Password" />
    </Form.Group>
  </Form.Row>

  <Form.Group controlId="formGridAddress1">
    <Form.Label>Address</Form.Label>
    <Form.Control placeholder="1234 Main St" />
  </Form.Group>

  <Form.Group controlId="formGridAddress2">
    <Form.Label>Address 2</Form.Label>
    <Form.Control placeholder="Apartment, studio, or floor" />
  </Form.Group>

  <Form.Row>
    <Form.Group as={Col} controlId="formGridCity">
      <Form.Label>City</Form.Label>
      <Form.Control />
    </Form.Group>

    <Form.Group as={Col} controlId="formGridState">
      <Form.Label>State</Form.Label>
      <Form.Control as="select" defaultValue="Choose...">
        <option>Choose...</option>
        <option>...</option>
      </Form.Control>
    </Form.Group>

    <Form.Group as={Col} controlId="formGridZip">
      <Form.Label>Zip</Form.Label>
      <Form.Control />
    </Form.Group>
  </Form.Row>

  <Form.Group id="formGridCheckbox">
    <Form.Check type="checkbox" label="Check me out" />
  </Form.Group>

  <Button variant="primary" type="submit">
    Submit
  </Button>
</Form>
Horizontal form
You may also swap <Row> for <Form.Row>, a variation of the standard grid row that overrides the default column gutters for tighter and more compact layouts.
<Form>
  <Form.Group as={Row} controlId="formHorizontalEmail">
    <Form.Label column sm={2}>
      Email
    </Form.Label>
    <Col sm={10}>
      <Form.Control type="email" placeholder="Email" />
    </Col>
  </Form.Group>

  <Form.Group as={Row} controlId="formHorizontalPassword">
    <Form.Label column sm={2}>
      Password
    </Form.Label>
    <Col sm={10}>
      <Form.Control type="password" placeholder="Password" />
    </Col>
  </Form.Group>
  <fieldset>
    <Form.Group as={Row}>
      <Form.Label as="legend" column sm={2}>
        Radios
      </Form.Label>
      <Col sm={10}>
        <Form.Check
          type="radio"
          label="first radio"
          name="formHorizontalRadios"
          id="formHorizontalRadios1"
        />
        <Form.Check
          type="radio"
          label="second radio"
          name="formHorizontalRadios"
          id="formHorizontalRadios2"
        />
        <Form.Check
          type="radio"
          label="third radio"
          name="formHorizontalRadios"
          id="formHorizontalRadios3"
        />
      </Col>
    </Form.Group>
  </fieldset>
  <Form.Group as={Row} controlId="formHorizontalCheck">
    <Col sm={{ span: 10, offset: 2 }}>
      <Form.Check label="Remember me" />
    </Col>
  </Form.Group>

  <Form.Group as={Row}>
    <Col sm={{ span: 10, offset: 2 }}>
      <Button type="submit">Sign in</Button>
    </Col>
  </Form.Group>
</Form>
Horizontal form label sizing
You can size the <FormLabel> using the column prop as shown.
<Form.Group>
  <Form.Row>
    <Form.Label column="lg" lg={2}>
      Large Text
    </Form.Label>
    <Col>
      <Form.Control size="lg" type="text" placeholder="Large text" />
    </Col>
  </Form.Row>
  <br />
  <Form.Row>
    <Form.Label column lg={2}>
      Normal Text
    </Form.Label>
    <Col>
      <Form.Control type="text" placeholder="Normal text" />
    </Col>
  </Form.Row>
  <br />
  <Form.Row>
    <Form.Label column="sm" lg={2}>
      Small Text
    </Form.Label>
    <Col>
      <Form.Control size="sm" type="text" placeholder="Small text" />
    </Col>
  </Form.Row>
</Form.Group>
Column sizing
As shown in the previous examples, our grid system allows you to place any number of <Col>s within a <Row> or <Form.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}>.
<Form>
  <Form.Row>
    <Col xs={7}>
      <Form.Control placeholder="City" />
    </Col>
    <Col>
      <Form.Control placeholder="State" />
    </Col>
    <Col>
      <Form.Control placeholder="Zip" />
    </Col>
  </Form.Row>
</Form>
Auto-sizing
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.
<Form>
  <Form.Row className="align-items-center">
    <Col xs="auto">
      <Form.Label htmlFor="inlineFormInput" srOnly>
        Name
      </Form.Label>
      <Form.Control
        className="mb-2"
        id="inlineFormInput"
        placeholder="Jane Doe"
      />
    </Col>
    <Col xs="auto">
      <Form.Label htmlFor="inlineFormInputGroup" srOnly>
        Username
      </Form.Label>
      <InputGroup className="mb-2">
        <InputGroup.Prepend>
          <InputGroup.Text>@</InputGroup.Text>
        </InputGroup.Prepend>
        <FormControl id="inlineFormInputGroup" placeholder="Username" />
      </InputGroup>
    </Col>
    <Col xs="auto">
      <Form.Check
        type="checkbox"
        id="autoSizingCheck"
        className="mb-2"
        label="Remember me"
      />
    </Col>
    <Col xs="auto">
      <Button type="submit" className="mb-2">
        Submit
      </Button>
    </Col>
  </Form.Row>
</Form>
You can then remix that once again with size-specific column classes.
<Form>
  <Form.Row className="align-items-center">
    <Col sm={3} className="my-1">
      <Form.Label htmlFor="inlineFormInputName" srOnly>
        Name
      </Form.Label>
      <Form.Control id="inlineFormInputName" placeholder="Jane Doe" />
    </Col>
    <Col sm={3} className="my-1">
      <Form.Label htmlFor="inlineFormInputGroupUsername" srOnly>
        Username
      </Form.Label>
      <InputGroup>
        <InputGroup.Prepend>
          <InputGroup.Text>@</InputGroup.Text>
        </InputGroup.Prepend>
        <FormControl id="inlineFormInputGroupUsername" placeholder="Username" />
      </InputGroup>
    </Col>
    <Col xs="auto" className="my-1">
      <Form.Check type="checkbox" id="autoSizingCheck2" label="Remember me" />
    </Col>
    <Col xs="auto" className="my-1">
      <Button type="submit">Submit</Button>
    </Col>
  </Form.Row>
</Form>
And of course custom form controls are supported.
<Form>
  <Form.Row className="align-items-center">
    <Col xs="auto" className="my-1">
      <Form.Label className="mr-sm-2" htmlFor="inlineFormCustomSelect" srOnly>
        Preference
      </Form.Label>
      <Form.Control
        as="select"
        className="mr-sm-2"
        id="inlineFormCustomSelect"
        custom
      >
        <option value="0">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </Form.Control>
    </Col>
    <Col xs="auto" className="my-1">
      <Form.Check
        type="checkbox"
        id="customControlAutosizing"
        label="Remember my preference"
        custom
      />
    </Col>
    <Col xs="auto" className="my-1">
      <Button type="submit">Submit</Button>
    </Col>
  </Form.Row>
</Form>
Inline forms
Use the inline prop to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within forms vary slightly from their default states.

Controls are display: flex, collapsing any HTML white space and allowing you to provide alignment control with spacing and utilities.
Controls and input groups receive width: auto to override the Bootstrap default width: 100%.
Controls only appear inline in viewports that are at least 576px wide to account for narrow viewports on mobile devices.

You may need to manually address the width and alignment of individual form controls with spacing utilities (as shown below). Lastly, be sure to always include a <Form.Label> with each form control, even if you need to hide it from non-screenreader visitors with the srOnly prop.
<Form inline>
  <Form.Label htmlFor="inlineFormInputName2" srOnly>
    Name
  </Form.Label>
  <Form.Control
    className="mb-2 mr-sm-2"
    id="inlineFormInputName2"
    placeholder="Jane Doe"
  />
  <Form.Label htmlFor="inlineFormInputGroupUsername2" srOnly>
    Username
  </Form.Label>
  <InputGroup className="mb-2 mr-sm-2">
    <InputGroup.Prepend>
      <InputGroup.Text>@</InputGroup.Text>
    </InputGroup.Prepend>
    <FormControl id="inlineFormInputGroupUsername2" placeholder="Username" />
  </InputGroup>
  <Form.Check
    type="checkbox"
    className="mb-2 mr-sm-2"
    id="inlineFormCheck"
    label="Remember me"
  />
  <Button type="submit" className="mb-2">
    Submit
  </Button>
</Form>
Custom form controls and selects are also supported.
<Form inline>
  <Form.Label className="my-1 mr-2" htmlFor="inlineFormCustomSelectPref">
    Preference
  </Form.Label>
  <Form.Control
    as="select"
    className="my-1 mr-sm-2"
    id="inlineFormCustomSelectPref"
    custom
  >
    <option value="0">Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </Form.Control>
  <Form.Check
    type="checkbox"
    className="my-1 mr-sm-2"
    id="customControlInline"
    label="Remember my preference"
    custom
  />
  <Button type="submit" className="my-1">
    Submit
  </Button>
</Form>

Alternatives to hidden labelsAssistive technologies such as screen readers will have trouble with your forms if you don’t include a label for every input. For these inline forms, you can hide the labels using the srOnly prop. There are further alternative methods of providing a label for assistive technologies, such as the aria-label, aria-labelledby or title attribute. If none of these are present, assistive technologies may resort to using the placeholder attribute, if present, but note that use of placeholder as a replacement for other labelling methods is not advised.Help text
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.

Associating help text with form controlsHelp text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses or enters the control.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.
<>
  <Form.Label htmlFor="inputPassword5">Password</Form.Label>
  <Form.Control
    type="password"
    id="inputPassword5"
    aria-describedby="passwordHelpBlock"
  />
  <Form.Text id="passwordHelpBlock" muted>
    Your password must be 8-20 characters long, contain letters and numbers, and
    must not contain spaces, special characters, or emoji.
  </Form.Text>
</>
Inline text can use any typical inline HTML element (be it a <small>, <span>, or something else) with nothing more than a utility class.
<Form inline>
  <Form.Group>
    <Form.Label htmlFor="inputPassword6">Password</Form.Label>
    <Form.Control
      type="password"
      className="mx-sm-3"
      id="inputPassword6"
      aria-describedby="passwordHelpInline"
    />
    <Form.Text id="passwordHelpInline" muted>
      Must be 8-20 characters long.
    </Form.Text>
  </Form.Group>
</Form>
Disabled forms
Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.
<>
  <Form.Group>
    <Form.Label>Disabled input</Form.Label>
    <Form.Control placeholder="Disabled input" disabled />
  </Form.Group>
  <Form.Group>
    <Form.Label>Disabled select menu</Form.Label>
    <Form.Control as="select" disabled>
      <option>Disabled select</option>
    </Form.Control>
  </Form.Group>
  <Form.Group>
    <Form.Check type="checkbox" label="Can't check this" disabled />
  </Form.Group>
</>
Add the disabled attribute to a <fieldset> to disable all the controls within.
<Form>
  <fieldset disabled>
    <Form.Group>
      <Form.Label htmlFor="disabledTextInput">Disabled input</Form.Label>
      <Form.Control id="disabledTextInput" placeholder="Disabled input" />
    </Form.Group>
    <Form.Group>
      <Form.Label htmlFor="disabledSelect">Disabled select menu</Form.Label>
      <Form.Control as="select" id="disabledSelect">
        <option>Disabled select</option>
      </Form.Control>
    </Form.Group>
    <Form.Group>
      <Form.Check
        type="checkbox"
        id="disabledFieldsetCheck"
        label="Can't check this"
      />
    </Form.Group>
    <Button type="submit">Submit</Button>
  </fieldset>
</Form>

Caveat with anchorsBy default, browsers will treat all native form controls (<input>, <select> and <button> elements) inside a <fieldset disabled> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <a ... class="btn btn-*"> elements, these will only be given a style of pointer-events: none. As noted in the section about disabled state for buttons (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn’t fully supported in Internet Explorer 10, and won’t prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
Cross-browser compatibilityWhile Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don’t fully support the disabled attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.Validation
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 :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).
Watch out! Browsers provide their own validation UI by default on forms. You can disable the default UI by adding the HTML noValidate attribute to your <Form> or <form> element.function FormExample() {
  const [validated, setValidated] = useState(false);

  const handleSubmit = (event) => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }

    setValidated(true);
  };

  return (
    <Form noValidate validated={validated} onSubmit={handleSubmit}>
      <Form.Row>
        <Form.Group as={Col} md="4" controlId="validationCustom01">
          <Form.Label>First name</Form.Label>
          <Form.Control
            required
            type="text"
            placeholder="First name"
            defaultValue="Mark"
          />
          <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
        </Form.Group>
        <Form.Group as={Col} md="4" controlId="validationCustom02">
          <Form.Label>Last name</Form.Label>
          <Form.Control
            required
            type="text"
            placeholder="Last name"
            defaultValue="Otto"
          />
          <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
        </Form.Group>
        <Form.Group as={Col} md="4" controlId="validationCustomUsername">
          <Form.Label>Username</Form.Label>
          <InputGroup hasValidation>
            <InputGroup.Prepend>
              <InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
            </InputGroup.Prepend>
            <Form.Control
              type="text"
              placeholder="Username"
              aria-describedby="inputGroupPrepend"
              required
            />
            <Form.Control.Feedback type="invalid">
              Please choose a username.
            </Form.Control.Feedback>
          </InputGroup>
        </Form.Group>
      </Form.Row>
      <Form.Row>
        <Form.Group as={Col} md="6" controlId="validationCustom03">
          <Form.Label>City</Form.Label>
          <Form.Control type="text" placeholder="City" required />
          <Form.Control.Feedback type="invalid">
            Please provide a valid city.
          </Form.Control.Feedback>
        </Form.Group>
        <Form.Group as={Col} md="3" controlId="validationCustom04">
          <Form.Label>State</Form.Label>
          <Form.Control type="text" placeholder="State" required />
          <Form.Control.Feedback type="invalid">
            Please provide a valid state.
          </Form.Control.Feedback>
        </Form.Group>
        <Form.Group as={Col} md="3" controlId="validationCustom05">
          <Form.Label>Zip</Form.Label>
          <Form.Control type="text" placeholder="Zip" required />
          <Form.Control.Feedback type="invalid">
            Please provide a valid zip.
          </Form.Control.Feedback>
        </Form.Group>
      </Form.Row>
      <Form.Group>
        <Form.Check
          required
          label="Agree to terms and conditions"
          feedback="You must agree before submitting."
        />
      </Form.Group>
      <Button type="submit">Submit form</Button>
    </Form>
  );
}

render(<FormExample />);
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, 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'),
});

function FormExample() {
  return (
    <Formik
      validationSchema={schema}
      onSubmit={console.log}
      initialValues={{
        firstName: 'Mark',
        lastName: 'Otto',
        username: '',
        city: '',
        state: '',
        zip: '',
        terms: false,
      }}
    >
      {({
        handleSubmit,
        handleChange,
        handleBlur,
        values,
        touched,
        isValid,
        errors,
      }) => (
        <Form noValidate onSubmit={handleSubmit}>
          <Form.Row>
            <Form.Group as={Col} md="4" controlId="validationFormik01">
              <Form.Label>First name</Form.Label>
              <Form.Control
                type="text"
                name="firstName"
                value={values.firstName}
                onChange={handleChange}
                isValid={touched.firstName && !errors.firstName}
              />
              <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
            </Form.Group>
            <Form.Group as={Col} md="4" controlId="validationFormik02">
              <Form.Label>Last name</Form.Label>
              <Form.Control
                type="text"
                name="lastName"
                value={values.lastName}
                onChange={handleChange}
                isValid={touched.lastName && !errors.lastName}
              />

              <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
            </Form.Group>
            <Form.Group as={Col} md="4" controlId="validationFormikUsername">
              <Form.Label>Username</Form.Label>
              <InputGroup hasValidation>
                <InputGroup.Prepend>
                  <InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
                </InputGroup.Prepend>
                <Form.Control
                  type="text"
                  placeholder="Username"
                  aria-describedby="inputGroupPrepend"
                  name="username"
                  value={values.username}
                  onChange={handleChange}
                  isInvalid={!!errors.username}
                />
                <Form.Control.Feedback type="invalid">
                  {errors.username}
                </Form.Control.Feedback>
              </InputGroup>
            </Form.Group>
          </Form.Row>
          <Form.Row>
            <Form.Group as={Col} md="6" controlId="validationFormik03">
              <Form.Label>City</Form.Label>
              <Form.Control
                type="text"
                placeholder="City"
                name="city"
                value={values.city}
                onChange={handleChange}
                isInvalid={!!errors.city}
              />

              <Form.Control.Feedback type="invalid">
                {errors.city}
              </Form.Control.Feedback>
            </Form.Group>
            <Form.Group as={Col} md="3" controlId="validationFormik04">
              <Form.Label>State</Form.Label>
              <Form.Control
                type="text"
                placeholder="State"
                name="state"
                value={values.state}
                onChange={handleChange}
                isInvalid={!!errors.state}
              />
              <Form.Control.Feedback type="invalid">
                {errors.state}
              </Form.Control.Feedback>
            </Form.Group>
            <Form.Group as={Col} md="3" controlId="validationFormik05">
              <Form.Label>Zip</Form.Label>
              <Form.Control
                type="text"
                placeholder="Zip"
                name="zip"
                value={values.zip}
                onChange={handleChange}
                isInvalid={!!errors.zip}
              />

              <Form.Control.Feedback type="invalid">
                {errors.zip}
              </Form.Control.Feedback>
            </Form.Group>
          </Form.Row>
          <Form.Group>
            <Form.Check
              required
              name="terms"
              label="Agree to terms and conditions"
              onChange={handleChange}
              isInvalid={!!errors.terms}
              feedback={errors.terms}
              id="validationFormik0"
            />
          </Form.Group>
          <Button type="submit">Submit form</Button>
        </Form>
      )}
    </Formik>
  );
}

render(<FormExample />);
Tooltips
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'),
});

function FormExample() {
  return (
    <Formik
      validationSchema={schema}
      onSubmit={console.log}
      initialValues={{
        firstName: 'Mark',
        lastName: 'Otto',
        username: '',
        city: '',
        state: '',
        zip: '',
        file: null,
        terms: false,
      }}
    >
      {({
        handleSubmit,
        handleChange,
        handleBlur,
        values,
        touched,
        isValid,
        errors,
      }) => (
        <Form noValidate onSubmit={handleSubmit}>
          <Form.Row>
            <Form.Group as={Col} md="4" controlId="validationFormik101">
              <Form.Label>First name</Form.Label>
              <Form.Control
                type="text"
                name="firstName"
                value={values.firstName}
                onChange={handleChange}
                isValid={touched.firstName && !errors.firstName}
              />
              <Form.Control.Feedback tooltip>Looks good!</Form.Control.Feedback>
            </Form.Group>
            <Form.Group as={Col} md="4" controlId="validationFormik102">
              <Form.Label>Last name</Form.Label>
              <Form.Control
                type="text"
                name="lastName"
                value={values.lastName}
                onChange={handleChange}
                isValid={touched.lastName && !errors.lastName}
              />

              <Form.Control.Feedback tooltip>Looks good!</Form.Control.Feedback>
            </Form.Group>
            <Form.Group as={Col} md="4" controlId="validationFormikUsername2">
              <Form.Label>Username</Form.Label>
              <InputGroup hasValidation>
                <InputGroup.Prepend>
                  <InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
                </InputGroup.Prepend>
                <Form.Control
                  type="text"
                  placeholder="Username"
                  aria-describedby="inputGroupPrepend"
                  name="username"
                  value={values.username}
                  onChange={handleChange}
                  isInvalid={!!errors.username}
                />
                <Form.Control.Feedback type="invalid" tooltip>
                  {errors.username}
                </Form.Control.Feedback>
              </InputGroup>
            </Form.Group>
          </Form.Row>
          <Form.Row>
            <Form.Group as={Col} md="6" controlId="validationFormik103">
              <Form.Label>City</Form.Label>
              <Form.Control
                type="text"
                placeholder="City"
                name="city"
                value={values.city}
                onChange={handleChange}
                isInvalid={!!errors.city}
              />

              <Form.Control.Feedback type="invalid" tooltip>
                {errors.city}
              </Form.Control.Feedback>
            </Form.Group>
            <Form.Group as={Col} md="3" controlId="validationFormik104">
              <Form.Label>State</Form.Label>
              <Form.Control
                type="text"
                placeholder="State"
                name="state"
                value={values.state}
                onChange={handleChange}
                isInvalid={!!errors.state}
              />
              <Form.Control.Feedback type="invalid" tooltip>
                {errors.state}
              </Form.Control.Feedback>
            </Form.Group>
            <Form.Group as={Col} md="3" controlId="validationFormik105">
              <Form.Label>Zip</Form.Label>
              <Form.Control
                type="text"
                placeholder="Zip"
                name="zip"
                value={values.zip}
                onChange={handleChange}
                isInvalid={!!errors.zip}
              />

              <Form.Control.Feedback type="invalid" tooltip>
                {errors.zip}
              </Form.Control.Feedback>
            </Form.Group>
          </Form.Row>
          <Form.Group>
            <Form.File
              className="position-relative"
              required
              name="file"
              label="File"
              onChange={handleChange}
              isInvalid={!!errors.file}
              feedback={errors.file}
              id="validationFormik107"
              feedbackTooltip
            />
          </Form.Group>
          <Form.Group>
            <Form.Check
              required
              name="terms"
              label="Agree to terms and conditions"
              onChange={handleChange}
              isInvalid={!!errors.terms}
              feedback={errors.terms}
              id="validationFormik106"
              feedbackTooltip
            />
          </Form.Group>
          <Button type="submit">Submit form</Button>
        </Form>
      )}
    </Formik>
  );
}

render(<FormExample />);
Input group validation
To properly show rounded corners in an <InputGroup> with validation, the <InputGroup> requires the hasValidation prop.
<InputGroup hasValidation>
  <InputGroup.Prepend>
    <InputGroup.Text>@</InputGroup.Text>
  </InputGroup.Prepend>
  <Form.Control type="text" required isInvalid />
  <Form.Control.Feedback type="invalid">
    Please choose a username.
  </Form.Control.Feedback>
</InputGroup>
Examples
Custom forms
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.
Checkboxes and radios
Custom checkbox and radio styles are achieved with a resourceful use of the :checked selector and :after pseudo elements, but are Structurally similar to the default FormCheck. By default the checked and indeterminate icons use embedded svg icons from Open Iconic.
Apply Bootstrap's custom elements by adding the custom prop.
<Form>
  {['checkbox', 'radio'].map((type) => (
    <div key={`custom-${type}`} className="mb-3">
      <Form.Check 
        custom
        type={type}
        id={`custom-${type}`}
        label={`Check this custom ${type}`}
      />

      <Form.Check
        custom
        disabled
        type={type}
        label={`disabled ${type}`}
        id={`disabled-custom-${type}`}
      />
    </div>
  ))}
</Form>
Switches
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>.
<Form>
  <Form.Check 
    type="switch"
    id="custom-switch"
    label="Check this switch"
  />
  <Form.Check 
    disabled
    type="switch"
    label="disabled switch"
    id="disabled-custom-switch"
  />
</Form>
You can also use the <Form.Switch> alias which encapsulates the above, in a very small component wrapper.
Watch out!You must specify an id when using custom check controls or switches. Event handlers are triggered by linking the label with the input via id.Inline
<Form>
  {['checkbox', 'radio'].map((type) => (
    <div key={`custom-inline-${type}`} className="mb-3">
      <Form.Check
        custom
        inline
        label="1"
        type={type}
        id={`custom-inline-${type}-1`}
      />
      <Form.Check
        custom
        inline
        label="2"
        type={type}
        id={`custom-inline-${type}-2`}
      />
      <Form.Check
        custom
        inline
        disabled
        label="3 (disabled)"
        type={type}
        id={`custom-inline-${type}-3`}
      />
    </div>
  ))}
</Form>
Select
For the select form control you can pass the custom prop to get custom styling of the select element. Custom styles are limited to the select initial appearance and cannot modify the option styling due to browser limitations.
<Form>
  <Form.Group controlId="exampleForm.SelectCustom">
    <Form.Label>Custom select</Form.Label>
    <Form.Control as="select" custom>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </Form.Control>
  </Form.Group>
</Form>
Sizing
The custom select element supports sizing.
<Form>
  <Form.Group controlId="exampleForm.SelectCustomSizeSm">
    <Form.Label>Custom select Small</Form.Label>
    <Form.Control as="select" size="sm" custom>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </Form.Control>
  </Form.Group>
  <Form.Group controlId="exampleForm.SelectCustomSizeLg">
    <Form.Label>Custom select Large</Form.Label>
    <Form.Control as="select" size="lg" custom>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </Form.Control>
  </Form.Group>
</Form>
HTML size
You can also specify the visible options of your select element.
<Form>
  <Form.Group controlId="exampleForm.SelectCustomHtmlSize">
    <Form.Label>Select with three visible options</Form.Label>
    <Form.Control as="select" htmlSize={3} custom>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </Form.Control>
  </Form.Group>
</Form>
Range
For the range form control you can pass the custom prop to get custom styling of the select element. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
<Form>
  <Form.Group controlId="formBasicRangeCustom">
    <Form.Label>Range</Form.Label>
    <Form.Control type="range" custom />
  </Form.Group>
</Form>
File
A custom styled File uploader.
The custom FormFile will by default not visibly display your selected file. This requires additional JS. The recommended plugin to animate custom file input is bs-custom-file-input.<Form>
  <Form.File 
    id="custom-file"
    label="Custom file input"
    custom
  />
</Form>
Translating or customizing the strings with HTML
Bootstrap also provides a way to translate the “Browse” text in HTML with the data-browse attribute which can be added to the custom input label (example in Dutch):
Note that the data-browse attribute does not to anything unless the custom prop is set.<Form>
  <Form.File 
    id="custom-file-translate-html"
    label="Voeg je document toe"
    data-browse="Bestand kiezen"
    custom
  />
</Form>
Translating or customizing the strings with SCSS
Please refer to the official Bootstrap documentation for translating via SCSS. The lang prop can be used to pass the language.
<Form>
  <Form.File 
    id="custom-file-translate-scss"
    label="Custom file input"
    lang="en"
    custom
  />
</Form>
Customizing FormFile rendering
When you need tighter control, or want to customize how the FormFile component renders, it may be better to use it's constituent parts directly.
By providing children to the FormFile you can forgo the default rendering and handle it yourself. (You can still provide an id to the FormFile and have it propagate to the label and input).

When customizing the FormFile rendering it is important to note the order of the label and input elements.

If you are not setting the custom prop thelabel should be before the input.
If you are setting the custom prop the input element has to be placed before the label or the buttonText prop will not work.

<Form>
  <div className="mb-3">
    <Form.File id="formcheck-api-custom" custom>
      <Form.File.Input isValid />
      <Form.File.Label data-browse="Button text">
        Custom file input
      </Form.File.Label>
      <Form.Control.Feedback type="valid">You did it!</Form.Control.Feedback>
    </Form.File>
  </div>
  <div className="mb-3">
    <Form.File id="formcheck-api-regular">
      <Form.File.Label>Regular file input</Form.File.Label>
      <Form.File.Input />
    </Form.File>
  </div>
</Form>
API
Form
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.


inline 
boolean
false
Display the series of labels, form controls, and buttons on a single horizontal row


validated 
boolean

Mark a form as having been validated. Setting it to true will toggle any validation styles on the forms elements.


bsPrefix 
string
{'form'}
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.



Form.Row
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-row'
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.



Form.Group
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>.


bsPrefix 
string
'form-group'
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.



Form.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.


srOnly 
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.



Form.Text
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.



Form.Control
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' | 'select' | elementType
'input'
The underlying HTML element to use when rendering the FormControl.


custom 
boolean

Use Bootstrap's custom form elements to replace the browser defaults


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'. Specifies the number of visible options if as is 'select'.


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).


value 
string | arrayOf | number


controlled by: onChange, initial prop: defaultValue
The value attribute of underlying input



bsPrefix 
string
{'form-control'}
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.


bsCustomPrefix 
string
'custom'
A seperate bsPrefix used for custom controls



FormControl.Feedback
import FormControl from 'react-bootstrap/FormControl'Copy import code for the FormControl component

Name
Type
Default
Description



as 
elementType
<div>
You can use a custom element type for this component.


className 
string




tooltip 
boolean
false
Display feedback as a tooltip.


type 
'valid' | 'invalid'
'valid'
Specify whether the feedback is for valid or invalid fields


bsPrefix 
never

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.



Form.Check
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.Input isInvalid type={radio} /><FormCheck.Label>Allow us to contact you?</FormCheck.Label><Feedback type="invalid">Yo this is required</Feedback></FormCheck>



custom 
all(PropTypes.bool, ({ custom, id }) => custom && !id ? Error('Custom check controls require an id to work') : null, )

Use Bootstrap's custom form elements to replace the browser defaults


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 for custom check controls or 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.


bsCustomPrefix 
string
'custom-control'
A seperate bsPrefix used for custom controls



FormCheck.Input
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


isStatic 
boolean

A convenience prop shortcut for adding position-static to the input, for correct styling when used without an FormCheckLabel


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.


bsCustomPrefix 
string
'custom-control'
A seperate bsPrefix used for custom controls



FormCheck.Label
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-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.


bsCustomPrefix 
string
'custom-control'
A seperate bsPrefix used for custom controls



Form.File
import Form from 'react-bootstrap/Form'Copy import code for the Form component

Name
Type
Default
Description



as 
'div' | elementType
'div'
The wrapping HTML element to use when rendering the FormFile.


children 
node


Provide a function child to manually handle the layout of the FormFile's inner components. If not using the custom prop FormFile.Label> should be before <FormFile.Input isInvalid /> <FormFile><FormFile.Label>Allow us to contact you?</FormFile.Label><FormFile.Input isInvalid /><Feedback type="invalid">Yo this is required</Feedback></FormFile> If using the custom prop <FormFile.Input isInvalid /> should be before FormFile.Label> <FormFile custom><FormFile.Input isInvalid /><FormFile.Label>Allow us to contact you?</FormFile.Label><Feedback type="invalid">Yo this is required</Feedback></FormFile>



custom 
boolean

Use Bootstrap's custom form elements to replace the browser defaults


data-browse 
string

The string for the "Browse" text label when using custom file input


disabled 
boolean
false



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.


inputAs 
'input' | elementType
'input'
The underlying HTML element to use when rendering the FormFile.


isInvalid 
boolean
false
Manually style the input as invalid


isValid 
boolean
false
Manually style the input as valid


label 
node




lang 
all(PropTypes.string, ({ custom, lang }) => lang && !custom ? Error('`lang` can only be set when custom is `true`') : null, )

The language for the button when using custom file input and SCSS based strings


bsPrefix 
string
'form-file'
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.


bsCustomPrefix 
string
'custom-file'
A seperate bsPrefix used for custom controls



FormFile.Input
import FormFile from 'react-bootstrap/FormFile'Copy import code for the FormFile component

Name
Type
Default
Description



as 
'input' | elementType
'input'
The underlying HTML element to use when rendering the FormFileInput.


id 
string

A HTML id attribute, necessary for proper form accessibility.


isInvalid 
boolean

Manually style the input as invalid


isValid 
boolean

Manually style the input as valid


lang 
string

The language for the button when using custom file input and SCSS based strings


bsPrefix 
string
'form-file-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.


bsCustomPrefix 
string
'custom-file-input'
A seperate bsPrefix used for custom controls



FormFile.Label
import FormFile from 'react-bootstrap/FormFile'Copy import code for the FormFile component

Name
Type
Default
Description



data-browse 
string

The string for the "Browse" text label when using custom file input


htmlFor 
string

The HTML for attribute for associating the label with an input


bsPrefix 
string
'form-file-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.


bsCustomPrefix 
string
'custom-file-label'
A seperate bsPrefix used for custom controls




    
{'path': 'public/docs/react_bootstrap/components/forms/index.html', 'source': 'DevDocs.IO'}