# Checkbox, radio and switch

Source: https://iriscss.com/documentation/form/checkbox-radio-and-switch/

Checkboxes and radios with custom marks, and `role="switch"` to turn a checkbox into a switch.

Put the input inside its `label`. The label lines up with the box and the whole label is clickable.

```html
<fieldset>
  <legend>Notifications</legend>
  <label><input type="checkbox" name="email" checked> Email</label>
  <label><input type="checkbox" name="sms"> SMS</label>
</fieldset>
<fieldset>
  <legend>Plan</legend>
  <label><input type="radio" name="plan" value="monthly" checked> Monthly</label>
  <label><input type="radio" name="plan" value="yearly"> Yearly</label>
</fieldset>
```

## Switch

`role="switch"` on a checkbox draws a switch. Screen readers announce it as on or off.

```html
<label><input type="checkbox" role="switch" checked> Dark mode</label>
<label><input type="checkbox" role="switch"> Autoplay</label>
```

## Colors

Checked boxes, radios and switches use the primary color. A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) on the input changes it.

```html
<label><input type="checkbox" class="danger" checked> Danger</label>
<label><input type="radio" class="info" checked> Info</label>
<label><input type="checkbox" role="switch" class="accent" checked> Accent</label>
```

## Indeterminate

A checkbox for a partly selected list shows a dash. Set `indeterminate` from a script, since there is no attribute for it.

```html
<label><input type="checkbox" id="select-all"> Select all</label>
```

```js
document.getElementById("select-all").indeterminate = true;
```

## Disabled

```html
<label><input type="checkbox" disabled> Checkbox</label>
<label><input type="radio" disabled checked> Radio</label>
<label><input type="checkbox" role="switch" disabled> Switch</label>
```

## Variables

| Variable | Default |
| --- | --- |
| `--i-checkbox-radio-border-width` | `0.125rem` |
| `--i-switch-border-width` | `0.1875rem` |
| `--i-switch-thumb-shadow` | `0 0 0 #0000` |
| `--i-switch-color-background` | `light-dark(#8790a3, #5f6880)` |
| `--i-switch-color-thumb` | `var(--i-color-white)` |