Unlimited Access

Upgrade your plan from a Free trial, to select ‘Business Plan’. Start Now

Upgrade Now

Checks and radios

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

Default (stacked)

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with FormCheck.

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

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

Design
Code


<Form>
    <Form.Select size="lg">
        <option>Large select</option>
    </Form.Select>
    <br />
    <Form.Select>
        <option>Default select</option>
    </Form.Select>
    <br />
    <Form.Select size="sm">
        <option>Small select</option>
    </Form.Select>
</Form>

Inline

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

Design
Code
<Form>
 {['checkbox', 'radio'].map((type) => (
     <div key={`inline-${type}`} className="mb-3">
         <Form.Check
             inline
             label="1"
             name="group1"
             type={type}
             id={`inline-${type}-1`}
         />
         <Form.Check
             inline
             label="2"
             name="group1"
             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!

Design
Code
<Form>
    <Form.Check aria-label="option 1" />
    <Form.Check type="radio" aria-label="radio 1" />
</Form>

Customizing FormCheck rendering

Group checkboxes or radios on the same horizontal row by adding the FormCheck prop. 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).

Design
Code
You did it!
You did it!
<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>