Checkbox

Overview

A checkbox lets users toggle a single option on or off, or pick several options from a set. Pair it with a Label for an accessible, clickable target.

$ npx morpha-ui add checkbox

Examples

With label

Accept terms and conditions

Disabled

Disabled option

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 Radix primitive.
Keyboard: focus with Tab, toggle with Space.