# Checkboxes

> Material Design 3 checkboxes, from the HTML.

## Introduction

A `<label>` wrapping `<input type="checkbox">` is the control. The label text is a sibling of the input — no extra class, no required `<span>`. They are CSS only. There is no JavaScript component and nothing to AutoInit.

Tokens follow the [M3 checkbox spec](https://m3.material.io/components/checkbox/specs). The container is 18dp with 2dp corners. Unselected is a 2dp `on-surface-variant` outline. Selected is a `primary` fill with an `on-primary` check. Indeterminate is the same fill with a dash. The state layer is 40dp at 8% hover and 10% focus. The touch target is 48dp. The label is `body-large` / `on-surface`. Disabled is 38%.

Put the input first. Add `checked` or `disabled` on the input. Indeterminate is not an HTML attribute — set `element.indeterminate = true` in script. `filled-in` is a no-op: the selected state is always the filled box.

 Red Yellow  Indeterminate  Green  Brown

```
<label>
  <input type="checkbox">
  Red
</label>
<label>
  <input type="checkbox" checked>
  Yellow
</label>
<label>
  <input type="checkbox" disabled>
  Brown
</label>
```

```
document.getElementById('indeterminate-checkbox').indeterminate = true;
```

An `input + span` still works if you already have that markup, or if you follow BeerCSS’s `<label class="checkbox">` pattern. Multiple `<select>` still emits `input + span` that way.

```
<label class="checkbox">
  <input type="checkbox">
  <span>Yellow</span>
</label>
```

## In a row

Put the labels in a `<div class="inline">` to sit them on one line. A bare group stacks vertically.

 Red Yellow  Green

```
<div class="inline">
  <label>
    <input type="checkbox" checked>
    Red
  </label>
  <label>
    <input type="checkbox">
    Yellow
  </label>
</div>
```

## Error

Add `aria-invalid="true"` or `class="invalid"` on the input. The box uses `error` / `on-error`.

 Accept the terms Required option

```
<label>
  <input type="checkbox" aria-invalid="true">
  Accept the terms
</label>
```