Checkbox

A checkbox with a spring-in fill and a drawn-on tick, plus indeterminate support. For choices a form commits later.

Install Checkbox

1. New project? One command installs the package and wires everything - see Installation:

bash
pnpm dlx zyncat-ui init

2. Import the component - it loads its own stylesheet:

tsx
import { Checkbox } from '@zyncat/ui/checkbox';

Usage

tsx
import { Checkbox } from '@zyncat/ui/checkbox';
 
<Checkbox label="Pin post to queue" description="Published before any other scheduled items." />

Compose Checkbox in your application. No Tailwind or external styling library is required; every value resolves from Zyncat UI's token vocabulary.

Checkbox props

Checkbox

PropTypeDefaultDescription
...htmlAttributesHTMLAttributes—Standard <input> attributes (name, value, required, aria-*, ...) forwarded to the checkbox input.
checkedboolean—Controlled checked state. Omit for uncontrolled (use `defaultChecked`).
defaultCheckedboolean—Uncontrolled initial state.
indeterminatebooleanfalseIndeterminate - the "some, not all" select-all state; visually wins over `checked`.
errorbooleanfalseSingle error state for consent gates ("you must agree"); also sets `aria-invalid`.
disabledboolean—Disabled - inert and de-emphasized (distinct fill when checked).
size'sm' | 'md''md'Box size: `md` 18px - `sm` 16px for dense table rows.
labelReactNode—Label text beside the box.
descriptionReactNode—Optional secondary line under the label (settings rows).
onChangeChangeEventHandler<HTMLInputElement>—Fires on toggle - read `e.target.checked`.
classNamestring—Extra class(es) merged onto the root label.
styleCSSProperties—Inline styles merged onto the root label.

Frequently asked questions

Pass indeterminate - it renders a short dash instead of the tick and visually wins over checked. It mirrors the native .indeterminate DOM property, which HTML exposes as a property rather than an attribute, so the component sets it imperatively through a ref rather than as a plain prop on the input.

A real one - the tick is an SVG path animated with stroke-dasharray/stroke-dashoffset, and it's timed to draw in slightly after the accent fill has started springing into the box, rather than both firing at once.

Pass error as a boolean - the box and tick recolor to the danger tokens and aria-invalid is set on the input, so a screen reader announces the invalid state alongside the color change. It's a single flag, not a message prop, so pair it with your own error text elsewhere in the form.

Checkbox is for a choice a form commits later, on submit; Toggle is for a setting that takes effect the instant you flip it. Both share the same label, description, checked and onChange shape, so swapping one for the other is a one-line change.

Set in Geist & Newsreader — animated by the house engineZyncat UI · Rev 0.11 · MIT · Built by Tabsir Ahammed · Source on GitHub