Morpha UI

Checkbox

A control for binary or multiple selection.

Overview

A checkbox lets users toggle a single option on or off, or pick several options from a set. It supports an indeterminate (mixed) state for parent/child groups and an error tone via aria-invalid. Pair it with a Label for an accessible, clickable target.

$ npx morpha-ui add checkbox

Examples

With label

Indeterminate

A checkbox can have a parent/child relationship: when the parent is checked all children are checked, and vice versa. If only some children are selected the parent becomes indeterminate — pass the indeterminate boolean prop.

Invalid

Set aria-invalid to switch the checkbox to the error tone — a red outline when unselected and a red fill when selected.

States

The checkbox follows the MD3 state-layer model: a circular overlay tints the control on hover (8%) and on focus or press (10%), with a secondary focus ring.

Rest
Hover
Focus
Pressed

Disabled

Installation

Morpha UI components are distributed via the Morpha CLI (coming in a later step): npx morpha-ui add checkbox. In the meantime, since this is the base shadcn component, you can also add it directly:

npx shadcn@latest add checkbox

API Reference

Prop

Type

Accessibility

  • Associate a <Label htmlFor> with the checkbox id so the label is clickable and announced.
  • The checked / indeterminate state is exposed to assistive tech by the underlying Base UI primitive.
  • Set aria-invalid to expose the error state to assistive tech (and render the error tone).
  • The hit target is at least 44×44px even though the box is 18px, meeting touch-target guidance.
  • Keyboard: focus with Tab, toggle with Space.

Calendar

A Material-3 date grid for single, multiple and range selection.

Chips

Compact elements for entering information, making selections, filtering content, or triggering low-emphasis actions.

On this page

OverviewExamplesWith labelIndeterminateInvalidStatesDisabledInstallationAPI ReferenceAccessibility