Check

An option in a form: a small square key that presses below the plate when chosen, with a tick printed on it.

Element: <input type="checkbox">
Needs: kit.css
Rules: choice.rules.md · 3
Finishes: Aluminium · Graphite · Porcelain · Black
Volumes: Tactile · Quiet

On this page

Variants
Every state, at once
API
Markup
Accessibility
How it’s built
Rules
Related parts

Variants

Loudness

Label right

Keep markers

In a settings row

Every state, at once

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

Part	Off	On	Focus
Check

Part	Off	On	Focus
Check

API

Name	Kind	Values	What it does
.tui-check	class	on <input type="checkbox">	An 18px square key. Checked: pressed below the plate with a printed tick.
.tui-choice	class	on <label>	Lines up the key and its words 8px apart; the whole label is the hit area.
checked · name · value	attribute	—	Native: forms post them unchanged.
change	event	—	Native.
Space	keyboard	—	Toggles.

Markup

<label class="tui-choice">
  <input type="checkbox" class="tui-check" name="loudness" checked> Loudness to −14 LUFS
</label>

Needs kit.css only, no script. How to install the kit.

A real checkbox: reached with Tab, toggled with Space, announced as “Dither, checkbox, not checked”.
Checked shows three ways: the key is lower, the tick is printed, and the input is :checked.
If the change applies at once, it is a switch; a check is for forms that are saved.

How it’s built

A native checkbox with appearance: none. At rest it carries a small skirt; checked, it moves down 1.5px and takes the kit’s pressed light. The tick is an ::after with two borders, turned 42°. No images.

Rules

choice.rules.mdIn the brain

Checked means pressed below the plate, with a printed tick.

3 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.

See the Founder Pass How agents use the brain