Checkbox
A checkbox that renders either the whole clickable row or just the box.
Loading documentation…
Powered by heyo
Pass label and Checkbox renders the whole clickable row — box, label,
description, and the <label> wrapping that makes all of it a hit target.
Without one it renders just the box, for a table's select column or a custom
layout; give it an aria-label in that case.
The third state exists for one reason: a header checkbox above rows where only
some are selected. useSelection computes it for you.
A checkbox is a value you are editing and will submit — it belongs in a form.
A Switch applies immediately, which is why it belongs
in settings.
An inline label next to the box. Its presence turns the component into the whole clickable row.
Muted helper text under the label.
Controlled and uncontrolled state.
Fires when the box is toggled.
The mixed state, for a header checkbox above a partial selection.
Dims the row and ignores interaction.
Class for the outer <label>, used when a label or description is given.
Class for the box itself.
Standard form behaviour, passed through to Base UI.