A native checkbox drawn as a gradient tick, plain or as a selectable card, with indeterminate.
Checkbox keeps the real <input type="checkbox"> (visually hidden, focusable, form-posting) and draws the box beside it. variant="card" turns the whole option into a bordered target for statements a user agrees to (terms, declarations).
Installation
npx shadcn@latest add KezLahd/rime/checkboxAlso installs: base, field, icon.
Usage
import { Checkbox } from "@/components/ui";
<Checkbox label="I accept the workspace terms" checked={ok} onChange={(e) => setOk(e.target.checked)} />Examples
Plain, card, indeterminate
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
Checkbox
| Prop | Type | Default | Description |
|---|---|---|---|
| labelRequired | ReactNode | ||
| description | ReactNode | ||
| indeterminate | boolean | ||
| error | ReactNode | Error text for a standalone checkbox (a declaration, accepting the terms). | |
| invalid | boolean | ||
| variant | "plain" | "card" | "plain" | plain = box and label. card = a bordered opt-in box that washes accent when ticked (declarations, an opt-in to email updates). |
Also accepts the native attributes of AriaAttributes, DOMAttributes, HTMLAttributes, InputHTMLAttributes.
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
This component has no tokens of its own; it reads the system tokens below.
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --brand | tokens.css | … |
| --brand-gradient | tokens.css | … |
| --danger-base | tokens.css | … |
| --danger-field-fill | tokens.css | … |
| --danger-ink | tokens.css | … |
| --dur | tokens.css | … |
| --ease | tokens.css | … |
| --focus-ring | tokens.css | … |
| --glow-sm | tokens.css | … |
| --ink-body | tokens.css | … |
| --ink-disabled | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-inverse | tokens.css | … |
| --ink-muted | tokens.css | … |
| --line | tokens.css | … |
| --neutral-border | tokens.css | … |
| --r-2xs | tokens.css | … |
| --r-lg | tokens.css | … |
| --rgb-brand | tokens.css | … |
| --rgb-brand-deep | tokens.css | … |
| --rgb-contact | tokens.css | … |
| --rgb-danger | tokens.css | … |
| --rgb-white | tokens.css | … |
| --surface-solid | tokens.css | … |
| --surface-sunken | tokens.css | … |
| --text-body | tokens.css | … |
| --text-caption | tokens.css | … |
Accessibility
- The label is the <label> of the real input, so the whole row toggles it.
- error renders under the option and is tied by aria-describedby.
Do and don't
Do
- Use the card variant for statements a user signs up to.
Don't
- Don't use a checkbox to trigger an immediate action; that is a Switch.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open checkbox.md