SegmentedControl

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

Playground

<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

<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

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