Checkbox
A 20px box toggle with checked and indeterminate states.
Controls
import { Checkbox, CheckboxIndicator } from "raft-ui";
<Checkbox />
{/* The box alone, inside a control that owns the checkbox semantics */}
<CheckboxIndicator checked />This uncontrolled checkbox starts checked and manages its own state.
Controlled state: unchecked
CheckboxIndicator is the box on its own, with no input or role. Use it inside a row or menu item that already owns the checkbox semantics.
3 of 8 selected
shapedefault: "square""square" | "circle"
Box shape. One size: a 20px box inside a 44 × 36px hit area; checked is an ink block with the mark knocked out.
checkedboolean
Controlled checked state. Pair with onCheckedChange.
defaultCheckeddefault: falseboolean
Initial checked state for uncontrolled usage.
indeterminatedefault: falseboolean
Mixed state, rendered as a dash. Extension beyond the original component.
onCheckedChange(checked: boolean, details) => void
Called when the checkbox is ticked or unticked.
disableddefault: falseboolean
Dims the box and blocks interaction.
renderReactElement | (props, state) => ReactElement
Replace the rendered element or compose with another component (Base UI).
...propsBase UI Checkbox.Root.Props
Form props (name, value, required, form) plus Base UI props.
| Prop | Type | Default | Description |
|---|---|---|---|
shape | "square" | "circle" | "square" | Box shape. One size: a 20px box inside a 44 × 36px hit area; checked is an ink block with the mark knocked out. |
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. |
checkedboolean
Draws the checked ink block with the mark. Required.
markdefault: "check""check" | "minus"
Mark drawn when checked. Use minus for a mixed state.
shapedefault: "square""square" | "circle"
Box shape, as on Checkbox.
disableddefault: falseboolean
Disabled look. Visual only; the owning control handles interaction.
previewOnHoverdefault: falseboolean
Shows a faint mark on an unchecked box while its group ancestor is hovered.
...propsComponentPropsWithRef<"span">
The 20px box as a decorative span (aria-hidden). Checkbox renders it internally; use it alone inside a row or menu item that owns the checkbox role and state.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Draws the checked ink block with the mark. Required. |
mark | "check" | "minus" | "check" | Mark drawn when checked. Use minus for a mixed state. |
shape | "square" | "circle" | "square" | Box shape, as on Checkbox. |
disabled | boolean | false | Disabled look. Visual only; the owning control handles interaction. |
previewOnHover | boolean | false | Shows a faint mark on an unchecked box while its group ancestor is hovered. |
...props | ComponentPropsWithRef<"span"> | — | The 20px box as a decorative span (aria-hidden). Checkbox renders it internally; use it alone inside a row or menu item that owns the checkbox role and state. |