Skip to content
Download assets

Checkbox

A checkbox marks an option as chosen. Use it when someone can pick several options, or agree to one statement, and then confirms with a button.

What it is

Documents received
Documents received

Two of the four documents are in, so All documents shows the mixed state.

When to use it

Use a checkbox when someone picks any number of options from a list, or agrees to one statement, and the choice counts once they press the form's button.

If the choice should apply the moment it is made, use a switch. If only one option may be chosen, use radio buttons, or a select for a long list. Past seven options, split the group under two labels or use a combobox that takes several choices.

Anatomy

The box sits on the first line of its label, and a long label wraps under itself. The whole row is the target: a click on the words checks the box too.

Box
16 px
Box in a dense table row
14 px
Box in a checklist on a phone
22 px
Corner radius
4 px, 6 px on the 22 px box
--radius-sm
Fill
white in light, control gray in dark
Edge
1 px, gray in light, faint white in dark
Label
14 px on a 20 px line
--text
Gap to the label
8 px
--space-2
Row height
at least 24 px, 44 px on touch
Indent under a parent
24 px
--space-6

States

A checkbox does not change under the pointer. A disabled one keeps its words readable, and the hint under the group says why it cannot be changed.

  • Rest
  • Focus
  • Checked
  • Mixed
  • Disabled
  • Disabled checked
  • Error
  • Rest
  • Focus
  • Checked
  • Mixed
  • Disabled
  • Disabled checked
  • Error
Checked and mixed
brand blue fill, no edge
--brand-blue
Tick and bar
white
--on-brand
Focus ring
2 px, 2 px outside the box
--focus-ring
Disabled
the box at half strength, the label muted
--text-muted
Error edge
1 px
--error

Groups and the mixed state

Give a group a label that says what the options share, and put any requirement in it: Choose at least one document.

A parent checks or clears all of its options. While some are checked it shows the mixed state, and a click on it checks the rest. Indent the options under their parent.

  • Documents received
    Mixed
  • Documents received
    After one click
  • Documents received
    After a second click

Keyboard and screen readers

Tab moves to each checkbox, and Space checks or clears it. Enter submits the form.

A screen reader hears the label and the state, mixed for a parent, and the group label once as focus enters the group. A checkbox with no words of its own, such as the one that selects a candidate in a board, takes a name that includes the row: Select Bishal Tamang.

Writing the label

Write labels in sentence case, without a full stop, and state the positive so that checked means yes. Keep options parallel, all nouns or all verbs, and move a word they share into the group label. Order them from the simplest to the most complex, or from the safest to the riskiest when a choice can lose data.

Permitted

  • A label that states the positive: Notify the candidate.

Not permitted

  • A label that makes checked mean no: Do not notify the candidate.

    Whoever fills in the form has to undo a negative before they can answer.

NextRadio

Checkbox

Marks one or more options as chosen. The choice applies when the form is submitted.

  • Kind: component
  • Page: https://design.werklist.com/components/checkbox
  • Version: 2.1.2

When to use it

  • Several options may be chosen from a group of up to seven.
  • One statement a person agrees to, such as Notify the candidate.
  • A parent that checks or clears a group of options.

When not to use it

  • A choice that applies at once: use Switch.
  • Exactly one option: use Radio, or Select for a long list.
  • More than seven options: split the group or use Combobox with several choices.

Rules

  • The choice applies when the form is saved, never on click.
  • A parent shows the mixed state while some of its options are checked.
  • Checked means yes: the label states the positive, such as Notify the candidate.

Anatomy

  • Box: 16 px, 14 px in dense table rows, 22 px in a checklist on a phone
  • Corner radius: 4 px, 6 px on the 22 px box (--radius-sm)
  • Edge at rest: 1 px inset, rgba(13, 18, 40, 0.55) in light, rgba(255, 255, 255, 0.2) in dark
  • Fill at rest: #ffffff in light, --surface-control in dark
  • Fill checked or mixed (--brand-blue)
  • Tick: 12 px in the 16 px box, 11 px in the 14 px box, 16 px in the 22 px box, stroke 2 (--on-brand)
  • Mixed bar: 8 by 2 px, radius 1 px, centered (--on-brand)
  • Label: 14 px on 20 px, weight 400 (--text)
  • Gap box to label: 8 px (--space-2)
  • Box position: centered on the first label line, 2 px below its top
  • Row: at least 24 px with a fine pointer, 44 px with a coarse pointer
  • Space between options: 8 px with a fine pointer, 0 with a coarse pointer (--space-2)
  • Child indent: 24 px (--space-6)
  • Focus ring: 2 px, offset 2 px (--focus-ring)

Sizes

  • default: height 16 px box
  • compact: height 14 px box, in dense table rows only
  • touch checklist: height 22 px box, radius 6 px

States

  • rest: the flat box inside its 1 px edge
  • focus visible: 2 px ring outside the box (--focus-ring)
  • checked: brand fill with a white tick (--brand-blue, --on-brand)
  • mixed: brand fill with a white bar, on a parent only (--brand-blue, --on-brand)
  • disabled: box and mark at half strength, label in muted ink (--text-muted)
  • invalid: error edge, with the message in the error line of the group (--error, --error-ink)

Keyboard

  • Tab: Moves to the next checkbox
  • Space: Checks or clears the focused checkbox
  • Enter: Submits the form and does not toggle

Accessibility

  • A native checkbox input.
  • A parent in the mixed state is announced as mixed.
  • A group is a fieldset. Its legend takes the style of a field label and holds any requirement.
  • A checkbox without visible words takes a name that includes its row, such as Select Bishal Tamang.
  • Disabled lowers the box to half strength and mutes the label, which stays readable.
  • The box prints with its fill and tick.
  • In forced colors mode the edge and the tick take system colors.

Content

  • Checked means yes. No negative labels.
  • Sentence case, no full stop.
  • Options are parallel. Words they share move to the group label.
  • Order from the simplest to the most complex, or from the safest to the riskiest.

Tokens

  • --text-muted
  • --text
  • --brand-blue
  • --on-brand
  • --surface-control
  • --error
  • --error-ink
  • --radius-sm
  • --radius-md
  • --space-2
  • --space-6
  • --focus-ring
  • --focus-ring-width
  • --focus-ring-offset
  • --duration-fast
  • --ease-standard

JSON

{
  "title": "Checkbox",
  "path": "/components/checkbox",
  "url": "https://design.werklist.com/components/checkbox",
  "text": "https://design.werklist.com/agent/components/checkbox",
  "summary": "Lets someone pick any number of options, and applies the choice when the form is saved.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Checkbox",
  "purpose": "Marks one or more options as chosen. The choice applies when the form is submitted.",
  "use": [
    "Several options may be chosen from a group of up to seven.",
    "One statement a person agrees to, such as Notify the candidate.",
    "A parent that checks or clears a group of options."
  ],
  "avoid": [
    "A choice that applies at once: use Switch.",
    "Exactly one option: use Radio, or Select for a long list.",
    "More than seven options: split the group or use Combobox with several choices."
  ],
  "anatomy": [
    {
      "part": "Box",
      "measure": "16 px, 14 px in dense table rows, 22 px in a checklist on a phone"
    },
    {
      "part": "Corner radius",
      "measure": "4 px, 6 px on the 22 px box",
      "token": "--radius-sm"
    },
    {
      "part": "Edge at rest",
      "measure": "1 px inset, rgba(13, 18, 40, 0.55) in light, rgba(255, 255, 255, 0.2) in dark"
    },
    {
      "part": "Fill at rest",
      "measure": "#ffffff in light, --surface-control in dark"
    },
    {
      "part": "Fill checked or mixed",
      "token": "--brand-blue"
    },
    {
      "part": "Tick",
      "measure": "12 px in the 16 px box, 11 px in the 14 px box, 16 px in the 22 px box, stroke 2",
      "token": "--on-brand"
    },
    {
      "part": "Mixed bar",
      "measure": "8 by 2 px, radius 1 px, centered",
      "token": "--on-brand"
    },
    {
      "part": "Label",
      "measure": "14 px on 20 px, weight 400",
      "token": "--text"
    },
    {
      "part": "Gap box to label",
      "measure": "8 px",
      "token": "--space-2"
    },
    {
      "part": "Box position",
      "measure": "centered on the first label line, 2 px below its top"
    },
    {
      "part": "Row",
      "measure": "at least 24 px with a fine pointer, 44 px with a coarse pointer"
    },
    {
      "part": "Space between options",
      "measure": "8 px with a fine pointer, 0 with a coarse pointer",
      "token": "--space-2"
    },
    {
      "part": "Child indent",
      "measure": "24 px",
      "token": "--space-6"
    },
    {
      "part": "Focus ring",
      "measure": "2 px, offset 2 px",
      "token": "--focus-ring"
    }
  ],
  "sizes": [
    {
      "name": "default",
      "height": "16 px box"
    },
    {
      "name": "compact",
      "height": "14 px box, in dense table rows only"
    },
    {
      "name": "touch checklist",
      "height": "22 px box, radius 6 px"
    }
  ],
  "states": [
    {
      "name": "rest",
      "change": "the flat box inside its 1 px edge"
    },
    {
      "name": "focus visible",
      "change": "2 px ring outside the box",
      "tokens": [
        "--focus-ring"
      ]
    },
    {
      "name": "checked",
      "change": "brand fill with a white tick",
      "tokens": [
        "--brand-blue",
        "--on-brand"
      ]
    },
    {
      "name": "mixed",
      "change": "brand fill with a white bar, on a parent only",
      "tokens": [
        "--brand-blue",
        "--on-brand"
      ]
    },
    {
      "name": "disabled",
      "change": "box and mark at half strength, label in muted ink",
      "tokens": [
        "--text-muted"
      ]
    },
    {
      "name": "invalid",
      "change": "error edge, with the message in the error line of the group",
      "tokens": [
        "--error",
        "--error-ink"
      ]
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "Moves to the next checkbox"
    },
    {
      "key": "Space",
      "action": "Checks or clears the focused checkbox"
    },
    {
      "key": "Enter",
      "action": "Submits the form and does not toggle"
    }
  ],
  "accessibility": [
    "A native checkbox input.",
    "A parent in the mixed state is announced as mixed.",
    "A group is a fieldset. Its legend takes the style of a field label and holds any requirement.",
    "A checkbox without visible words takes a name that includes its row, such as Select Bishal Tamang.",
    "Disabled lowers the box to half strength and mutes the label, which stays readable.",
    "The box prints with its fill and tick.",
    "In forced colors mode the edge and the tick take system colors."
  ],
  "content": [
    "Checked means yes. No negative labels.",
    "Sentence case, no full stop.",
    "Options are parallel. Words they share move to the group label.",
    "Order from the simplest to the most complex, or from the safest to the riskiest."
  ],
  "tokens": [
    "--text-muted",
    "--text",
    "--brand-blue",
    "--on-brand",
    "--surface-control",
    "--error",
    "--error-ink",
    "--radius-sm",
    "--radius-md",
    "--space-2",
    "--space-6",
    "--focus-ring",
    "--focus-ring-width",
    "--focus-ring-offset",
    "--duration-fast",
    "--ease-standard"
  ],
  "rules": [
    "The choice applies when the form is saved, never on click.",
    "A parent shows the mixed state while some of its options are checked.",
    "Checked means yes: the label states the positive, such as Notify the candidate."
  ]
}

Raw file: https://design.werklist.com/agent/components/checkbox