Checkbox
A binary choice with a precise, legible state.
pnpm dlx shadcn@latest add @uiarc/checkboxLive · keyboard ready
- Independent on and off choices confirmed by a submit, such as accepting terms.
- Parent rows that show a partial selection through the indeterminate state.
- Use switch for settings that apply immediately.
- Use radio-group when only one option can be chosen.
- Use chip-group for filter facets people toggle often.
Installation
Add Checkbox with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/checkboxAdds the component and its local dependencies, and installs @radix-ui/react-checkbox, motion. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { Checkbox } from "@/registry/components/checkbox/checkbox"; export function TermsCheckbox() { const [accepted, setAccepted] = useState(false); return ( <Checkbox label="I agree to the terms" description="You can export your data at any time." checked={accepted} onCheckedChange={(next) => setAccepted(next === true)} /> );}Checkbox
A Radix checkbox whose check morphs into the indeterminate dash and back.
PropTypeDefaultDescription
labelstring–Visible label. Without it, pass aria-label; the fallback name is "Checkbox".descriptionstring–Secondary copy under the label, linked through aria-describedby.checkedboolean | "indeterminate"–Controlled state.defaultCheckedboolean | "indeterminate"falseInitial state when uncontrolled.onCheckedChange(checked: boolean | "indeterminate") => void–Called on every toggle....propsComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>–Radix Checkbox root props, including ref, name, value, required, and disabled.- Space
- Toggles the checkbox.
- Radix renders a button with role="checkbox" and aria-checked, including "mixed" for indeterminate.
- The label is a real label element tied by id; description is linked through aria-describedby.
- The drawn mark is aria-hidden.
- The fill scales in on a snappy spring while the check path draws; switching to indeterminate morphs the same path into a dash.
- Reduced motion applies every state change instantly.
- The hit box is a full control-height square, so it stays easy to tap even though the drawn box is smaller.
- The label and description wrap beside the box; the box stays top-aligned with the first line.
- A single spring on the fill and a path draw per toggle; long lists of checkboxes are fine.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for independent on/off choices in forms. Use switch for settings that apply immediately and chip-group for filter facets.
- Set checked="indeterminate" on a parent checkbox when only some children are selected.
- Radix renders a hidden native input when name is set, so it submits with forms.
The full library index for assistants is at /llms.txt.