www/docs/forms/checks-radios.mdx
import Check from '!!raw-loader!../examples/Form/Check'; import CheckApi from '!!raw-loader!../examples/Form/CheckApi'; import CheckInline from '!!raw-loader!../examples/Form/CheckInline'; import CheckReverse from '!!raw-loader!../examples/Form/CheckReverse'; import NoLabels from '!!raw-loader!../examples/Form/NoLabels'; import Switch from '!!raw-loader!../examples/Form/Switch';
For the non-textual checkbox and radio controls, FormCheck
provides a single component for both types that adds some additional
styling and improved layout.
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with FormCheck.
<CodeBlock language="jsx" live> {Check} </CodeBlock>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>.
:::tip
You can also use the <Form.Switch> alias which encapsulates
the above, in a very small component wrapper.
:::
Group checkboxes or radios on the same horizontal row by adding the inline prop.
Put your checkboxes, radios, and switches on the opposite side with the reverse prop.
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!
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).