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.
import Form from 'react-bootstrap/Form';
function CheckExample() {
return (
<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>
);
}
export default CheckExample;
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>.
import Form from 'react-bootstrap/Form';
function SwitchExample() {
return (
<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>
);
}
export default SwitchExample;
You can also use the <Form.Switch> alias which encapsulates
the above, in a very small component wrapper.
Inline
Group checkboxes or radios on the same horizontal row by adding the inline prop.
import Form from 'react-bootstrap/Form';
function CheckInlineExample() {
return (
<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>
);
}
export default CheckInlineExample;
Reverse
Put your checkboxes, radios, and switches on the opposite side with the reverse prop.
import Form from 'react-bootstrap/Form';
function CheckReverseExample() {
return (
<Form>
{['checkbox', 'radio'].map((type) => (
<div key={`reverse-${type}`} className="mb-3">
<Form.Check
reverse
label="1"
name="group1"
type={type}
id={`reverse-${type}-1`}
/>
<Form.Check
reverse
label="2"
name="group1"
type={type}
id={`reverse-${type}-2`}
/>
<Form.Check
reverse
disabled
label="3 (disabled)"
type={type}
id={`reverse-${type}-3`}
/>
</div>
))}
</Form>
);
}
export default CheckReverseExample;
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!
import Form from 'react-bootstrap/Form';
function NoLabelExample() {
return (
<>
<Form.Check aria-label="option 1" />
<Form.Check type="radio" aria-label="radio 1" />
</>
);
}
export default NoLabelExample;
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).
import Form from 'react-bootstrap/Form';
function CheckApiExample() {
return (
<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>
);
}
export default CheckApiExample;
API