Source: https://monarchui.dev/components/checkbox/

Components · Forms

# Checkbox

Binary or indeterminate choice with inline label.

@rookcom/monarch-react

Component

## Inline label and indeterminate

## 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

```tsx
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.

## Related components

- [Switch](https://monarchui.dev/components/switch/): On/off settings that apply immediately.
- [Field](https://monarchui.dev/components/form-field/): Label and error wiring for a checkbox without an inline label.
- [DataTable](https://monarchui.dev/components/data-table/): TableSelectCell uses Checkbox for row selection.

## Dependencies

| Kind | Depends on |
| --- | --- |
| npm packages | `@radix-ui/react-checkbox``react` |
| Monarch components | [Field](https://monarchui.dev/components/form-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`

## All example code

### Inline label and indeterminate

```tsx
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 />
```