Build / Atoms

Checkbox

atom
play-fn

A single checkbox with its label.

The tick is an overlaid <svg> rather than a background-image, so it inherits the on-color token and stays correct in both themes.

import { Checkbox } from '@meetcard/deck'

Example

<Checkbox label="Add to CRM" defaultChecked /> <Checkbox label="Select all" indeterminate />

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

Default

Source

const Default = () => <Checkbox label="Add to CRM" onChange={fn()} />;

Checked by default — an option most people keep.

Checked

Source

const Checked = () => <Checkbox label="Add to CRM" onChange={fn()} defaultChecked />;

The mixed state for a "select all" that only covers part of a list.

Indeterminate

Source

const Indeterminate = () => <Checkbox label="Select all" onChange={fn()} indeterminate />;

With a description, when the label alone leaves the consequence unclear.

With Description

Source

const WithDescription = () => <Checkbox
    label="Add to CRM"
    onChange={fn()}
    description="Syncs this contact to your connected CRM within a minute." />;

In error. The message is announced, not only drawn in red.

With Error

Source

const WithError = () => <Checkbox
    label="I agree to the terms"
    onChange={fn()}
    error="You must accept to continue" />;

Disabled, unchecked and checked — a setting that exists but cannot be changed here.

Disabled

Source

const Disabled = () => <Stack gap={12}>
    <Checkbox label="Add to CRM" onChange={fn()} disabled />
    <Checkbox onChange={fn()} disabled defaultChecked label="Add to CRM (locked)" />
</Stack>;

Props

Prop	Type	Default	Description
`label`required	`ReactNode`	—	—
`description`	`ReactNode`	—	—
`error`	`ReactNode`	—	—
`indeterminate`	`boolean`	`false`	Renders the mixed state. Maps to the DOM `indeterminate` property, which has no HTML attribute equivalent, and sets `aria-checked="mixed"`.

Also accepts everything from Omit, so id, data-* and event handlers pass straight through.