Checkbox lets people select one or more options from a set. It provides a familiar form control with default and history variants for standard inputs and state transitions. Use it to keep selection patterns consistent across the product.
For card-based multi-select with descriptions, see Checkbox cards.
Checkbox Props
Name
Default
Description
type
CheckboxType.Default
Behavior variant. Options: Default or History.
labelPosition
LabelPosition.Left
Position of the label relative to the checkbox. Options: Left or Right.
id
Unique identifier for the input.
name
Name attribute for form submission.
value
Value included in form submission.
onCheckedChange
Callback fired when the checked state changes.
onClick
Callback fired on click.
checked
Controlled checked state. Accepts boolean or "indeterminate".
defaultChecked
Initial checked state for uncontrolled usage.
disabled
Disables interaction.
tabIndex
Forwards to the underlying checkbox button (for example -1 when the control is presentation-only inside another widget).
children
required
Label content.
CheckboxVisual Props
Decorative checkbox paint for use inside another widget (for example menuitemcheckbox). Always aria-hidden; the parent owns selection semantics.
Name
Default
Description
checked
false
boolean | "indeterminate". "indeterminate" paints the partial-selection dash.
disabled
false
Whether the indicator appears disabled.
className
Optional class merged onto the root.
Use interactive Checkbox for standalone form controls. Use CheckboxVisual only when nesting a real checkbox would create a nested-interactive violation.
Checkbox
Standard checkbox inputs with variants for different behaviors and label placement.
Default
Default checked (uncontrolled)
Controlled checked
Label on right
Indeterminate
Indeterminate list
History
History controlled
History (single)
Use when a checkbox represents a past or toggled state.