# Elección

Elegir entre opciones que el lector ve: casilla de verificación, botón de opción, interruptor y selector.

Un selector va dentro de `.luz-field`, igual que en [Campos de entrada](https://nandovejer.github.io/luz/es/docs/components/form-inputs/).

### Casilla de verificación
Una casilla que el lector marca para responder sí o no, o para elegir cualquiera de varias opciones independientes.

```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>
```

### Botón de opción
Botones redondos para elegir una opción entre unas pocas, con todas las opciones a la vista.

```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>
```

### Interruptor
Un interruptor para un ajuste que está activado o desactivado y surte efecto al instante.

```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>
```

### Selector
Una lista desplegable nativa para elegir una opción entre muchas, con la caja cerrada estilizada mediante 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>
```

### Problemas conocidos
La lista abierta de un selector se ve distinta en cada navegador y sistema. Es lo previsto.

- La caja cerrada es igual en todas partes; la lista que se abre desde ella la dibuja el navegador o el sistema operativo.
- Donde se admite `appearance: base-select` (Chrome y Edge 135 y posteriores, Safari 27 y posteriores), la lista toma los colores, la forma y el espaciado de LUZ. Firefox muestra los suyos.
- En los teléfonos se abre el selector del propio sistema, y LUZ no puede darle estilo.