Checkbox
Select multiple options from a list.
Select all
A parent checkbox turns indeterminate while only some of its children are checked. Clicking it from there checks every child.
States
Unchecked, checked, indeterminate, disabled, and a custom check color.
Usage
While indeterminate is true the box shows a minus and reports a mixed state
to assistive technology, whatever checked is. Clicking it calls
onCheckedChange(true).
Indicator only
CheckboxIndicator draws the box without an input. Use it inside a button,
tree row, or other control that already handles the click.
Checkbox Properties
Additional CSS classes to apply to the label wrapper
The content to be displayed as the checkbox label
Custom color for the checkbox when checked (CSS color value)
Custom class name for the children wrapper element
Custom class name for the checkbox control
Removes all hover feedback.
Default: false
Removes the container padding. Hover then darkens the empty checkbox's border instead of filling a background.
Default: false
Prevent interaction with the checkbox while preserving appearance
Default: false
Shows the minus and reports a mixed state, whatever checked is. Clicking it calls onCheckedChange(true).
Default: false
Custom icon for the indeterminate state
Default: <Icon name="minus" />
Custom icon for the selected state
Default: <Icon name="check" />
Set checkbox to a disabled, unclickable state
Default: false
The controlled checked state of the checkbox
The default checked state when used as an uncontrolled component
Event handler called when the checked state changes. CheckedState is boolean or 'indeterminate'.
When true, indicates that the user must check the checkbox before the owning form can be submitted
The name of the checkbox, used when submitting a form
The value of the checkbox, used when submitting a form
Default: on
CheckboxIndicator Properties
Shows the check mark
Default: false
Shows the minus mark. Wins over checked.
Default: false
Applies the same disabled treatment as Checkbox
Default: false
Custom icon for the selected state
Default: <Icon name="check" />
Custom icon for the indeterminate state
Default: <Icon name="minus" />
Additional CSS classes for the box