Checkbox

Selection box. Use when the user can choose multiple values independently (each checkbox controls its own boolean).

When to use

✅ Use when…	🚫 Avoid when…
Terms acceptance, communication preferences, filters (faceted search). Lists of items where zero, one, or several can be selected.	When the choice is exclusive among a few options — use `Radio`. To toggle a single binary setting with more visual weight — a toggle/switch communicates the action better.

Example

Hello World

Success checkbox

Error checkbox

Disabled checkbox

<Checkbox name="hello" label="Hello World" />
<Checkbox name="ok" label="Success checkbox" variant="success" />
<Checkbox name="bad" label="Error checkbox" variant="error" />
<Checkbox name="off" label="Disabled checkbox" disabled />

Color

The checked fill follows the brand primary by default — the same interactive hue as Button and Tabs. Pass color to pick another palette (information for a neutral "filter" check, secondary, …). The validation variants (success / error) still win when set.

<Checkbox name="terms" label="Terms" />
<Checkbox name="filter" label="Only favorites" color="information" />

Label typography

When label is a string, the text uses the Design System defaults (fontSize="small", color="neutral.180"). To adjust size, color, or weight, pass labelProps (overrides forwarded to the internal Text/BaseText):

<Checkbox
  name="terms"
  label="I have read and accept the terms"
  labelProps={{ fontSize: 'micro', color: 'neutral.140' }}
/>

For arbitrary markup (links, bold), pass a ReactNode as label — in that case labelProps is ignored and the node is rendered as-is.

Interactive Demo

Gotchas

Rendering several Checkboxes manually? Reach for FieldGroup first — it already handles grid spacing, columns, and Form integration for the case.
name is required when the Checkbox lives inside a Form — without it, React Hook Form cannot identify the field.

Properties


Prop	Type	Default	Description
`color`	`"success" \| "primary" \| "secondary" \| "tertiary" \| "information" \| "warning" \| "danger"`	`'primary'`	Interaction palette of the checked state (fill / ring / ink). Defaults to the brand `primary`, like `Button` and `Tabs`. `variant` (`success` / `error`) still wins when set.
`label`	`ReactNode`	`null`	Text or element displayed next to the box. When a `string`, it is rendered via `BaseText`; when a `ReactNode`, it is rendered as-is.
`labelProps`	`Partial<TextInterface>`	—	Typography overrides for a string `label` (`fontSize`, `color`, …). Ignored when `label` is a `ReactNode`. @example ```tsx <Checkbox name="terms" label="Aceito" labelProps={{ fontSize: 'micro', color: 'ink.secondary' }} /> ```
`onChange`	`((e: ChangeEvent<HTMLInputElement, Element>) => void)`	—	—
`value`	`string`	—	—
`variant`	`"default" \| "success" \| "error"`	`default`	Visual variant of the input — reflects the validation state.

In addition to the props above, every component accepts the layout props (spacing, color, flex/grid, sizing, border) — not repeated here.