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
Form.Checkview source file
import Form from 'react-bootstrap/Form'
Copy import code for the Form componentName | Type | Default | Description |
---|---|---|---|
ref | ReactRef | The FormCheck | |
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.
| |
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 | |
inline | boolean | false | Groups controls horizontally with other |
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 | '' |
|
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 componentName | 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 |
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 componentName | Type | Default | Description |
---|---|---|---|
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. |