Checkbox
Freev1.0.0The shadcn Checkbox, plus a tri-state tree for parent and child options.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import * as React from "react";
import { CheckboxTree } from "@/components/ui/notchset/checkbox";
const rules = [
{ id: "cost", label: "Cost over budget" },
{ id: "latency", label: "P95 latency over 400ms" },
{ id: "failures", label: "Failure rate over 2%" },
];
export function AlertRules() {
const [on, setOn] = React.useState<string[]>(["cost"]);
return <CheckboxTree label="All alerts" items={rules} value={on} onValueChange={setOn} />;
}Props
Checkbox–as the primitive + indeterminateshadcn's API; indeterminate shows the dash.
CheckboxTree–{ label, items, value, onValueChange, meta?, defaultOpen? }The parent, collapse key and child rows.
Anatomy
- Same API as shadcn's Checkbox, plus Tree.
- Base UI and Radix builds: your components.json picks one.
- Rows are labels, so the whole row toggles.
Checkboxdata-slot="checkbox"The box.
CheckboxTreedata-slot="checkbox-tree"The group.
Source
components/ui/notchset/checkbox.tsx
Loading the code
Build for your project
Code/install build
Installation
Base UI
pnpm dlx shadcn@latest add https://notchset.dev/r/checkbox.jsonRadix
pnpm dlx shadcn@latest add https://notchset.dev/r/radix-nova/checkbox.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @notchset registry added, @notchset/<name> picks for you.
Install by hand
- 1. Add the packages
pnpm add @base-ui/react@^1 - 2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/checkbox.tsx
- lib/beautiful-ui/notchset/checkbox.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
- 3. No stylesheet needed.
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- On/off choices that sit in a list
- A parent that checks a group
Use something else when
- A single setting that applies at once: use Switch
Mistakes to avoid
- Clicking the parent row toggles every child; the chevron only folds
Agents find it by
- checkbox, check all, tri-state, indeterminate, settings toggles, shadcn checkbox, Notchset
Where agents read it
- Guide for this component: https://notchset.dev/md/checkbox.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://notchset.dev/api/mcp(setup)
Behaviour
Keyboard
- Space
- Toggle
- Tab
- Next checkbox or the collapse key
Accessibility
- Native checkbox semantics; the parent is aria-checked=mixed when some are on
- The collapse key has aria-expanded and aria-controls; folded children are inert
Motion
- Check
- The check draws in (260ms after 60ms)
- Mixed
- A dash scales in (240ms)
- Fold
- Children unroll (380ms) or roll up (260ms after 60ms); rows settle in 50ms apart
Responsive
- Rows fill their container; labels truncate.
Performance
- CSS only; the check is a stroke-dashoffset transition.
Changelog
v1.0.0 · 2026-10-02
First release
