# SegmentedControl

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

## Playground

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

### Dia e noite

Os botões ficam juntos numa caixa; o escolhido fica em 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>
```

## Bons e maus padrões

Faça assim

Duas opções curtas, que trocam a vista na hora.

Não faça

Cinco opções longas: a caixa estoura no mobile. Isso é um Select.

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

Atributo

Valores

Para quê

`class="feitio-segmented"`

no grupo

A caixa com as opções.

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

obrigatórios

O nome do grupo, só em texto (sem marcação dentro).

`aria-pressed`

`"true"`, `"false"`

Qual opção está escolhida.