# SegmentedControl

Una elección entre unas pocas opciones vecinas, siempre visibles, que cambia la vista de inmediato.

## Playground

```html
<div class="feitio-segmented" role="group" aria-label="Período"><button type="button" aria-pressed="true">Día</button><button type="button" aria-pressed="false">Noche</button></div>
```

## Cuándo usarlo

-   Para dos a cuatro opciones breves que cambian lo que la persona ve ahora: día y noche, el idioma, 24 o 12 horas, lista o cuadrícula.

## Cuándo no usarlo

-   **Para un campo de formulario** que aplica al guardar: Radios.
-   **Para navegar entre páginas:** Nav.
-   **Más de cuatro opciones:** Select.

## Ejemplos

### Día y noche

Los botones se sitúan juntos en una caja; el elegido está en tinta.

Mostrar código

```html
<span class="feitio-segmented" role="group" aria-label="Luz">
  <button type="button" aria-pressed="true">Auto</button>
  <button type="button" aria-pressed="false">Dia</button>
  <button type="button" aria-pressed="false">Noite</button>
</span>
```

## Hacer y no hacer

Do

Dos opciones breves que cambian la vista de inmediato.

Don’t

Cinco opciones largas: la caja se desborda en móvil. Eso es un Select.

## Accesibilidad

-   Un grupo con nombre (`role="group"` y `aria-label`); cada opción es un botón con `aria-pressed`.
-   El botón se dibuja con menos de 40px de altura, pero el área táctil alcanza los 40.

## Atributos

Atributo

Valores

Para qué sirve

`class="feitio-segmented"`

en el grupo

La caja con las opciones.

`role="group"`, `aria-label`

obligatorio

El nombre del grupo, texto plano solo (sin marcados dentro).

`aria-pressed`

`"true"`, `"false"`

¿Qué opción está seleccionada.