Options
The Checkbox supports selection, an indeterminate mixed state, and either a visible label or an indicator-only presentation.Selection
The checkbox toggles between unselected and selected. UseisSelected for controlled selection or defaultSelected for uncontrolled.
Indeterminate
isIndeterminate renders a minus indicator for a select-all row whose children are only partially selected. It’s a display-only override — pair it with your own logic to derive the mixed state from the children’s selection, as shown above.
Label
A visiblelabel doubles as the accessible name. Omit label and supply aria-label or aria-labelledby instead for an indicator-only checkbox — common in dense table rows.
Behavior
The Checkbox responds to selection, focus, and disabled states.Visual States
Selecting the checkbox fills the indicator; keyboard focus draws a ring scoped to the square indicator, not the full label width.isDisabled dims the control and blocks interaction in either selection state.
Usage Guidelines
When to Use
Use the Checkbox when:- Selecting options from a set – Users choose one or more independent options.
- Selecting all in a group – A select-all row controls child options. Show the indeterminate state when only some children are selected.
- Selecting rows in dense layouts – Table rows or other compact layouts have no room for a visible label. Use an indicator-only Checkbox with an accessible name.
When not to use
Avoid using the Checkbox for:- Picking options from a list that opens from a trigger – Use the Menu with single or multiple selection instead.
- Toggling a button-style setting, such as bold or list view – Use the Button Toggle instead.