Browse components
Checkbox
Native checkbox restyled with a hand-drawn tick animation, indeterminate dash, label and description.
Installation
npx shadcn@latest add @glint-ui/checkboxFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/checkbox.json
Usage
import { Checkbox } from "@/components/ui/checkbox";
<Checkbox name="updates" label="Email me product updates" defaultChecked />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Email me product updates" | Clickable label. |
| description | string | "About one email a month. Unsubscribe anytime." | Helper text, linked via aria-describedby. |
| indeterminate | boolean | false | Mixed state, shows a dash. |
| disabled | boolean | false | Disable the checkbox. |
| checked | ReactNode | — | Controlled checked state (or use defaultChecked). All native input props are forwarded. |
| className | string | — | Extra classes for the root element. |