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.

    We'll never share your email with anyone else.

    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.

    For file inputs, use Form.File.

    Sizing

    Use size on <FormControl> and <FormLabel> to change the size of inputs and labels respectively.





    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.

    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.

    Range Inputs

    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.

    Inline

    Group checkboxes or radios on the same horizontal row by adding the inline prop.

    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!

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

    You did it!
    You did it!

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

    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.

    More complex layouts can also be created with the grid system.

    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.

    Horizontal form label sizing

    You can size the <FormLabel> using the column prop as shown.



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

    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.

    @

    You can then remix that once again with size-specific column classes.

    @

    And of course custom form controls are supported.

    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.

    @

    Custom form controls and selects are also supported.

    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.

    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.

    Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

    Inline text can use any typical inline HTML element (be it a <small>, <span>, or something else) with nothing more than a utility class.

    Must be 8-20 characters long.

    Disabled forms

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

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

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

    Looks good!
    Looks good!
    @
    Please choose a username.
    Please provide a valid city.
    Please provide a valid state.
    Please provide a valid zip.

    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.

    Looks good!
    Looks good!
    @

    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.

    Looks good!
    Looks good!
    @

    Input group validation

    To properly show rounded corners in an <InputGroup> with validation, the <InputGroup> requires the hasValidation prop.

    @
    Please choose a username.

    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.

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

    Inline

    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.

    Sizing

    The custom select element supports sizing.

    HTML size

    You can also specify the visible options of your select element.

    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.

    File

    A custom styled File uploader.

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

    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.

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

    You did it!

    API

    import Form from 'react-bootstrap/Form'Copy import code for the Form component
    NameTypeDefaultDescription
    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.

    import Form from 'react-bootstrap/Form'Copy import code for the Form component
    NameTypeDefaultDescription
    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.

    import Form from 'react-bootstrap/Form'Copy import code for the Form component
    NameTypeDefaultDescription
    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.

    import Form from 'react-bootstrap/Form'Copy import code for the Form component
    NameTypeDefaultDescription
    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.

    import Form from 'react-bootstrap/Form'Copy import code for the Form component
    NameTypeDefaultDescription
    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.Controlview source file

    import Form from 'react-bootstrap/Form'Copy import code for the Form component
    NameTypeDefaultDescription
    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.Feedbackview source file

    import FormControl from 'react-bootstrap/FormControl'Copy import code for the FormControl component
    NameTypeDefaultDescription
    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.

    import Form from 'react-bootstrap/Form'Copy import code for the Form component
    NameTypeDefaultDescription
    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.Inputview source file

    import FormCheck from 'react-bootstrap/FormCheck'Copy import code for the FormCheck component
    NameTypeDefaultDescription
    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.Labelview source file

    import FormCheck from 'react-bootstrap/FormCheck'Copy import code for the FormCheck component
    NameTypeDefaultDescription
    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

    import Form from 'react-bootstrap/Form'Copy import code for the Form component
    NameTypeDefaultDescription
    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.Inputview source file

    import FormFile from 'react-bootstrap/FormFile'Copy import code for the FormFile component
    NameTypeDefaultDescription
    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.Labelview source file

    import FormFile from 'react-bootstrap/FormFile'Copy import code for the FormFile component
    NameTypeDefaultDescription
    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