Checkbox
A square toggle with checked and indeterminate states.
Controls
import { Checkbox } from "raft-ui";
<Checkbox />This uncontrolled checkbox starts checked and manages its own state.
Controlled state: unchecked
Selection#WIP
3 of 8 selected
API#WIP
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "sm" | Visual size of the box. Brutal renders sm/md as 14px/16px; Elegant renders them as 16px/18px. |
variant | "default" | "primary" | "default" | Visual treatment for the checked background. |
checked | boolean | — | Controlled checked state. Pair with onCheckedChange. |
defaultChecked | boolean | false | Initial checked state for uncontrolled usage. |
indeterminate | boolean | false | Mixed state, rendered as a dash. Extension beyond the original component. |
onCheckedChange | (checked: boolean, details) => void | — | Called when the checkbox is ticked or unticked. |
disabled | boolean | false | Dims the box and blocks interaction. |
render | ReactElement | (props, state) => ReactElement | — | Replace the rendered element or compose with another component (Base UI). |
...props | Base UI Checkbox.Root.Props | — | Form props (name, value, required, form) plus Base UI props. |