Checkbox

A control that lets users toggle a single option on or off. Keyboard and screen-reader support come from the primitive underneath. Supports a three-state (indeterminate) mode for representing partial selection in nested groups. Use it in forms, settings, and multi-select lists.

States

Checked, indeterminate and disabled. indeterminate renders a minus rather than a check — the state a parent box takes when only some of its children are on. At 20px there is no room for a lit edge, so the box wears bg-field alone with no surface-field step.

With a label

Wrapping the box in a label gives the whole row a hit target, which is the difference between a control you can click and a 20px one you have to aim at.

Parent and children

The parent summarises the group: indeterminate while some children are on, checked once they all are. Without it, a long list gives no way to see or set the group as a whole.

API

Prop Type Default Description
checked bindable boolean false

Bindable checked state of the checkbox.

indeterminate bindable boolean false

Bindable indeterminate state. When true, shows a minus icon regardless of the checked value — typically for a parent controlling a partially-selected group.

class string

Additional Tailwind classes merged onto the root element.

disabled boolean

Prevents interaction and dims the checkbox (forwarded via ...rest).