# 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