Checkbox
Check, clear or mixed.
Required to continue.
In context
Native appearance
Props
| Prop | Type | Required | Default |
|---|---|---|---|
description | ReactNode | No | — |
variant | "default" | "card" | undefined | No | default |
appearance | "default" | "custom" | "native" | undefined | No | custom |
labelClassName | string | undefined | No | — |
invalid | boolean | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Accessibility
A real Radix checkbox (role="checkbox", Space toggles, a visible focus ring) inside a real <label>, so the whole row is the target. checked="indeterminate" is announced as mixed. Pass aria-label when there is no visible label.
data-rebar-* attributes
data-rebar-component="checkbox" on the control; data-rebar-part="indicator" on the mark, "label" on the text; Radix sets data-state.
Migrating to Ant Design
AntD's Checkbox takes the same checked/onChange shape (event-based) and children as its label: a close, low-risk rename.
Description and card variant
description adds a secondary line under the label, linked to the checkbox with aria-describedby. variant="card" makes the whole label a bordered card that tints when checked, for option lists such as plans or permissions.
<Checkbox variant="card" description="Billed monthly">Pro plan</Checkbox>appearance="native"
appearance="native" renders a real <input type="checkbox"> in the platform look (accent from --rebar-checkbox-native-accent), as a row with --rebar-checkbox-native-gap and -align. labelClassName styles the label.