Checks and radios

    Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.

    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.

    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

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

    API

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

    bsSwitchPrefix
    string
    'form-switch'

    bsPrefix override for the base switch class.

    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

    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.

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