Documentation
Fields

Choice Controls

Checkbox, Radio with RadioGroup, and Switch: three controls that share one `choice` family, so the box, focus ring and states are written once.

npx shadcn@latest add @fragiola/checkbox
Choice controls
Gallery

Style family

The choice family has five members — root, control, indicator, label, description — and zero variants. Checkbox and Radio use root + indicator; Switch uses root (the track) + control (the thumb). Each component overrides only what differs: Radio adds rounded-full, Switch adds w-9 h-5 rounded-full and a translate on the thumb.

Field.ChoiceRoot

Checkable controls use Field.ChoiceRoot instead of Field.Root — a horizontal row (control on the left, label on the right) instead of a vertical column. The same Label, Description and Error members are reused.

State normalization

Base UI emits data-checked and data-unchecked (not data-state=checked). The family uses data-checked:bg-palette-base and data-checked:text-palette-contrast — the indicator icon inherits the text colour and inverts automatically.