Components

Checkbox

A native checkbox whose tick draws itself in, with a label, a description and a mixed state.

Remind me to log spendingA nudge on the 1st of each month.Share anonymous usage dataSync to the cloud (coming soon)

Import

import { Checkbox } from '@rinzai/zen';

Examples

Select all

A "select all" that shows a dash while only some are checked.

All accounts

Salary accountCredit cardSavings

API reference

<Checkbox>

A checkbox: a native one, styled, so forms, the keyboard and screen readers work as usual. The tick draws itself in when checked; indeterminate shows a dash (e.g. "some selected"). With children, they're its label (and description a line under it); without, label it yourself or put it in a Field.

Prop	Type	Default
`children` The label.	`ReactNode`	`—`
`className` Classes for the label (or, without one, the box).	`string`	`—`
`description` A muted line under the label.	`ReactNode`	`—`
`indeterminate` Shows a dash instead of the tick, e.g. when some of a group are checked.	`boolean`	`false`
`onChange`	`((checked: boolean) => void)`	`—`