Checkbox

A checkbox component supporting controlled and uncontrolled usage, with indeterminate state for "select all" patterns.

Basic

Prop	Type	Default	Description
`checked`	`boolean`	—	Whether the checkbox is checked (controlled).
`defaultChecked`	`boolean`	`false`	The initial checked state (uncontrolled).
`onCheckedChange`	`(checked: boolean) => void`	—	Called when the checked state changes.
`indeterminate`	`boolean`	`false`	Shows an indeterminate (mixed) state.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color.
`label`	`string`	—	Label text displayed next to the checkbox.
`disabled`	`boolean`	`false`	Disables the checkbox.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

checked

boolean

Whether the checkbox is checked (controlled).

defaultCheckedfalse

boolean

The initial checked state (uncontrolled).

onCheckedChange

(checked: boolean) => void

Called when the checked state changes.

indeterminatefalse

boolean

Shows an indeterminate (mixed) state.

color"blue"

Accent color.

label

string

Label text displayed next to the checkbox.

disabledfalse

boolean

Disables the checkbox.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}