fetaUI
GitHub

Checkbox

Toggles between checked and not checked, with an indeterminate value for parents of a list.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/checkbox
Playground
Values
Field
Please confirm to continue.
Card
Group
1 of 4
Group, invalid
0 of 2
Pick at least one.
Icons animation
Indeterminate
Invalid
Disabled
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/checkbox

Field

A label and description with the whole row as the target. An error adds a message below.

Please confirm to continue.
Invalid
Disabled
Motion

Accessibility

  • A native checkbox with a label.
  • Indeterminate is set on the input, so it reads as mixed.
  • The hit area is 24 px on Web.

Motion

  • The box presses to 0.9, fills from the centre and draws its check in one stroke.
  • A parent checks its rows 30 ms apart.
  • With reduced motion, the state appears at once.

Responsive behavior

  • 18 px on Web and 22 px on Mobile, with 44 px rows in a group.

Performance

  • The check is one SVG path drawn with pathLength, and the fill scales on a spring.
  • CheckboxGroup delays each row by 30 ms through drawDelay. With reduced motion there is no delay.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import Checkbox, CheckboxField, CheckboxCard and CheckboxGroup from @/components/fetaui/checkbox.
  • Prefer CheckboxField. A bare Checkbox needs an aria-label.
  • Use checked and onCheckedChange, or defaultChecked. indeterminate is set on the native input.
  • In CheckboxGroup, the parent selects only enabled items, and disabled items keep their state. Pass items and read onValueChange.
/docs/components/checkbox/markdown
PreviousInput Group
NextRadio Group

Related

SwitchComponentTurns a setting on or off and applies it at once.Radio GroupComponentPick exactly one. A surface circle that fills to an ink disc with a dot.FieldComponentLabel, control and help text as one unit, so they read, validate and announce together.FieldsetComponentFields grouped under a legend, in an inset card on the tray.