# Choice

Pick from options the reader can see: checkbox, radio, switch and select.

A select sits in `.luz-field` as in [Inputs](https://nandovejer.github.io/luz/docs/components/form-inputs/).

### Checkbox
A box the reader ticks for a yes or no, or for any of several independent options.

```html
<div class="luz-check-group" role="group" aria-labelledby="notify-label">
  <div class="luz-check-item"><input type="checkbox" id="notify-email" checked><label for="notify-email">Email</label></div>
  <div class="luz-check-item"><input type="checkbox" id="notify-push"><label for="notify-push">Push</label></div>
</div>
```

### Radio
Round buttons for one option out of a few, every option in view.

```html
<fieldset class="luz-fieldset">
  <legend>Plan</legend>
  <div class="luz-check-group">
    <div class="luz-check-item"><input type="radio" name="plan" id="plan-free" checked><label for="plan-free">Free</label></div>
    <div class="luz-check-item"><input type="radio" name="plan" id="plan-team"><label for="plan-team">Team</label></div>
  </div>
</fieldset>
```

### Switch
A switch for a setting that is on or off and takes effect at once.

```html
<label class="luz-toggle">
  <input class="luz-toggle__input" type="checkbox" role="switch">
  <span class="luz-toggle__track" aria-hidden="true"><span class="luz-toggle__thumb"></span></span>
  <span class="luz-toggle__label">Weekly digest</span>
</label>
```

### Select
A native drop-down list for one option out of a long list, the closed box styled by tokens.

```html
<select class="luz-select" id="country" name="country">
  <option value="">Select a country</option>
  <option value="de">Germany</option>
  <option value="es">Spain</option>
</select>
```

### Known issues
The open list of a select looks different in each browser and system. This is intended.

- The closed box is the same everywhere; the list that opens from it is drawn by the browser or the operating system.
- Where `appearance: base-select` is supported (Chrome and Edge 135 and later, Safari 27 and later), the list takes LUZ's colors, shape and spacing. Firefox shows its own.
- On phones, the system's own picker opens, and LUZ cannot style it.