Checkbox

Base UICopy Anchor Link

Checkbox is a single on/off option with label and helper copy beside the control. Standalone rows need an external Field.Root from @base-ui/react for naming and validation; Checkbox does not own a field root the way Textfield does.

Related options share a selection model through CheckboxGroup. Add Fieldset with render={<CheckboxGroup />} only when the group needs a legend or shared description; otherwise CheckboxGroup may sit directly in Field.Root. Checked, indeterminate, disabled, and change handlers pass through Base UI; size scales the control and label.

When to useCopy Anchor Link

• A boolean that ships with a larger form submit (terms, save-as-default)
• Several independent options that can stay on at once (alert channels, plan tiers)
• A select-all row that needs an indeterminate state when only some children are checked

When not to useCopy Anchor Link

• The change should apply immediately as a setting → Switch
• Exactly one choice is allowed → Radio
• A long closed list in a popup → Select

RelatedCopy Anchor Link

• Fieldset — legend and group helper for CheckboxGroup
• Switch — immediate on/off settings
• Radio — mutually exclusive options

Common examplesCopy Anchor Link

Labeled groupCopy Anchor Link

A Fieldset-backed CheckboxGroup with labeled preference rows is the default multi-select pattern. Each option keeps its own label / description; the group owns value and onValueChange.

Standalone checkboxCopy Anchor Link

Standalone booleans under other fields wrap in their own Field.Root — no Fieldset without a shared legend.

Surface cardCopy Anchor Link

hPadding / vPadding let the control fill a bordered Surface. Drive Surface color from checked state when the whole card should read as selected.

Select allCopy Anchor Link

Lists of independent options stay one Field.Root + Checkbox per row. Drive a select-all row with Base UI indeterminate when some — but not all — children are checked.

Ask your agentCopy Anchor Link

Build notification preferences under the heading "Email alerts" with three checkboxes: product updates, security, and marketing. Keep each label short and add a one-line description per option.