Design System
Forms

Checkbox

An independent on/off choice. Use several for a set of options where any number may be chosen, and one on its own for consent.

Storybook (opens in a new tab)

Purpose

Each checkbox stands alone: ticking one says nothing about the others. When exactly one option must be chosen, use Radio group; when the choice takes effect immediately, use Switch.

Example

Accessibility & keyboard

  • Pair every checkbox with a Label via a matching id.
  • Keyboard: Space toggles; Tab moves between checkboxes.

FieldDraft

A labelled wrapper that lays out the label, control and a hint or error message, wired for accessibility so the message is announced with the input.

Radio groupDraft

A set of mutually exclusive options where exactly one must be chosen. Always give the group an accessible name.

On this page

PurposeExampleAccessibility & keyboard