Checks & radios
One component, FormCheck, covers checkboxes, radios, and switches.
It renders the control plus its label together, so you pass
label and id and it wires them up for you.
Import
import { FormCheck } from '@metatoy/bootstrap-styled';Checkboxes & radios
The default type is checkbox; set type="radio" for a radio. Radios in the
same group share a name. Pass the visible text via label.
Switches
type="switch" renders a checkbox styled as a toggle — same semantics, different
look.
Inline & reverse
inline lays checks out horizontally; reverse puts the label first with the
control on the right.
Button-style toggles
Set button to hide the native control and render the label as a toggle button.
buttonVariant picks the button variant (default outline-primary). Works for
checkboxes and radio groups alike.
Validation states
isValid / isInvalid color the control and its label to signal state.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "switch" | "checkbox" | "radio" | — | — |
| label | React.ReactNode | — | — |
| id | string | — | — |
| inline | boolean | — | Inline layout (`.form-check-inline`). |
| reverse | boolean | — | Reverse layout — label first, input right (`.form-check-reverse`). |
| button | boolean | — | Toggle-button style (`.btn-check` + a `.btn` label). |
| buttonVariant | string | — | Button variant when `button` is set (default "outline-primary"). |
| isInvalid | boolean | — | — |
| isValid | boolean | — | — |
FormCheck also accepts the native <input> attributes for the underlying
control (checked / defaultChecked, name, value, onChange, disabled, …).
Theming
The checked fill and switch track use --bs-primary / --bs-primary-rgb. The
control’s own background comes from --bs-form-check-bg, the check/dot glyph from
--bs-form-check-bg-image, and the switch knob from --bs-form-switch-bg. Borders
use --bs-border-color / --bs-border-width / --bs-border-radius; validation
uses --bs-form-valid-color / --bs-form-invalid-color and their matching border
tokens. Button-style toggles inherit the standard --bs-btn-* button tokens.
Accessibility
FormCheck renders a real <input type="checkbox|radio"> with an associated
<label>, so it’s focusable and announced correctly. Always provide label (or an
aria-label) and a stable id. Group related radios with a shared name, and
wrap a set in a <fieldset> / <legend> when the group needs a collective label.
A switch is a checkbox to assistive tech — its label should describe the on/off
choice.
Explore in Ladle
Browse checkbox, radio, switch, and button-toggle stories in the interactive gallery: Open in Ladle.