Checkbox

Inline label and indeterminate

Email me updates

About once a month.

Select all

Unavailable

import { Checkbox } from '@rookcom/monarch-react';

<Checkbox label="Email me updates" description="About once a month." defaultChecked />
<Checkbox label="Select all" checked="indeterminate" />
<Checkbox label="Unavailable" disabled />

Usage examples

The example at the top of the page is the only one for this component.

Purpose

A binary (or indeterminate) choice, with an optional inline label and description. Built on Radix Checkbox.

Use when

The choice is submitted with a form, or several independent options can be on at once.
A "select all" control that is partly selected (checked="indeterminate").

Avoid when

The setting applies immediately: use Switch.

Design principles

Pass label for an inline label; omit it when the checkbox sits in a Field with a FieldLabel.
Participates in native forms through name and value.

API reference

import { Checkbox } from '@rookcom/monarch-react';

Export	Kind	Rendering	Root class
`Checkbox`	component	client	`.mn-checkbox-`

Forwards its ref to the Radix Checkbox root (a <button role="checkbox">).

With label, className goes on the .mn-choice wrapper; without it, on the checkbox.

Generated from the TypeScript declarations of packages/react/src/components/forms/checkbox.

Properties

`Checkbox`

A checkbox with optional inline label. Supports `checked="indeterminate"`. Space toggles it; it participates in native forms via `name`/`value`.

Prop	Type	Description
`asChild`	`boolean`
`children`	`ReactNode`
`className`	`string`
`description`	`ReactNode`	Secondary text under an inline label.
`disabled`	`boolean`
`id`	`string`
`invalid`	`boolean`
`label`	`ReactNode`	Inline label. Omit when the checkbox sits inside a Field with a FieldLabel.

Variants

Checkbox has a single size and style; it has no variant props.

States

State	Exposed as	Behaviour
Checked / indeterminate	`data-state='checked' \| 'indeterminate'`	Filled accent box with a check or a dash glyph.
Invalid	`aria-invalid="true"`	Danger border; from `invalid` or the surrounding Field.
Disabled	`disabled`	Dimmed; the inline label uses the disabled text colour.
Focus	–	Visible focus ring on `:focus-visible`.

Interaction behaviour

Click on the box or the inline label toggles it.
description renders under the label and is added to aria-describedby.

Keyboard support

Keys	Action
`Tab`	Moves focus to the checkbox.
`Space`	Toggles the checkbox.

Accessibility

Role: checkbox
Accessible name: The inline label (a <label htmlFor>), a FieldLabel, or aria-label.

Indeterminate is exposed as aria-checked="mixed".
The description is linked with aria-describedby.

Responsive behaviour

This section is incomplete

No responsive behaviour is defined; the inline label wraps with its container.

Theme support

Colours are semantic tokens; the checked fill follows the product accent.

Do and don't

Do

Write the label as the positive statement ("Email me updates").

Don't

Do not use a checkbox for a setting that saves immediately; use Switch.

Switch: On/off settings that apply immediately.
Field: Label and error wiring for a checkbox without an inline label.
DataTable: TableSelectCell uses Checkbox for row selection.

Dependencies

Kind	Depends on
npm packages	`@radix-ui/react-checkboxreact`
Monarch components	Field

Testing coverage

Toggles with Space and click, including a click on the inline label, and is described by its description.
Supports indeterminate (aria-checked="mixed").

Check	Covered
Axe in jsdom	Yes
Server rendering	Yes
Browser suites	Visual baselines: /__gallery

Tests: packages/react/src/components/forms/checkbox