# Check

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

Kit part · Free · https://tactileui.dev/parts/check

- Element: `<input type="checkbox">`
- Needs: `kit.css` only, no script ([how to install the kit](https://tactileui.dev/docs/installation#the-kit))
- Categories: Checkboxes
- Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED
- Volumes: Tactile, Quiet

## Variants

### Label right

```html
<label class="tui-choice"><input type="checkbox" class="tui-check" checked> Loudness</label>
```

### In a settings row

```html
<label class="tui-choice" style="justify-content:space-between;width:220px">Keep markers <input type="checkbox" class="tui-check"></label>
```

## Every state

- Off
- On
- Focus

Hover, pressed and focus are forced with `.is-hover`, `.is-down` and `.is-focus`; checked and disabled are real.

## API

| Name | Kind | Values | What it does |
| - | - | - | - |
| .tui-check | class | on | An 18px square key. Checked: pressed below the plate with a printed tick. |
| .tui-choice | class | on | 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

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

The demo on the page:

```html
<fieldset style="border:0;padding:0;margin:0;display:grid;gap:14px"><legend class="tui-label" style="margin-bottom:12px">Export</legend>
  <label class="tui-choice"><input type="checkbox" class="tui-check" checked> Loudness to −14 LUFS</label>
  <label class="tui-choice"><input type="checkbox" class="tui-check"> Dither</label>
  <label class="tui-choice"><input type="checkbox" class="tui-check" checked> Keep markers</label>
</fieldset>
```

## Usage notes

Checked keys stay down. Space toggles the one that has focus.

## Accessibility

- 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](https://tactileui.dev/parts/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

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

The full rules are in `choice.rules.md` in the brain, which ships with the Kit.

## Related parts

- [Radio](https://tactileui.dev/parts/radio): One choice from a short list in a form: small round keys in a fieldset, the chosen one pressed with a printed dot.
- [Switch](https://tactileui.dev/parts/switch): On or off, applied the moment it moves. A native checkbox with a ridged thumb in a slot that lights green when on.
- [Field](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error.