SegmentedControl

Uma escolha entre poucas opções vizinhas, sempre à vista, que muda a vista na hora.

Playground

<div class="feitio-segmented" role="group" aria-label="Período"><button type="button" aria-pressed="true">Dia</button><button type="button" aria-pressed="false">Noite</button></div>

Quando usar

• Para duas a quatro opções curtas que trocam o que a pessoa vê agora: dia e noite, o idioma, 24 ou 12 horas, lista ou grade.

Quando não usar

• Para um campo de formulário que vale ao salvar: Radios.
• Para navegar entre páginas: Nav.
• Mais de quatro opções: Select.

Exemplos

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

Bons e maus padrões

Acessibilidade

• Um grupo com nome (role="group" e aria-label); cada opção é um botão com aria-pressed.
• O botão desenha menos de 40px de altura, mas a área de toque chega a 40.

Atributos