Switch
StableControle que faz efeito no instante em que se move. Composto sobre Base UI Switch. A distinção para o Checkbox não é de forma e sim de produto: switch pertence a um ajuste que se aplica na hora, checkbox a um valor enviado com o formulário — uma fileira de switches acima de um botão Salvar é uma promessa que a interface não cumpre. A pista visível é menor que o alvo: um pseudo-elemento estende a área de toque para fora da trilha sem mexer no layout ao redor.
Instalação
npx up-web-ds add switchPreview
Default
Sizes
States
Settings List
All states
Default
Sizes
States
Settings List
Metadata
Classificação
- Layer
- Primitive
- Domínio
- Domain-free (compartilhado)
- Categoria
- selection
- Status
- Stable
Origem e distribuição
- Fonte
- shadcn registry / switch
- Licença
- MIT
- Distribuição
- Interna
Acessibilidade
- Teclado: revisado
- Leitor de tela: revisado
- Touch: revisado
- Reduced motion: revisado
Teclado verificado por teste: alcançável por Tab, Space e Enter alternam, e um switch desabilitado sai da sequência de tabulação recusando a alternância sem deixar de reportar o estado. Leitor de tela verificado por teste: o papel é switch e não checkbox, o nome vem do label associado — a trilha não tem texto próprio —, aria-checked carrega o estado em vez de a cor sozinha, e aria-invalid é exposto sem trocar o papel do controle. Touch verificado em navegador com emulação de toque em viewport de 375px: a trilha visível mede 36x20 no tamanho default e 28x16 no sm, mas o alvo desenhado pelo pseudo-elemento mede acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8 nos dois, e o toque alterna. Reduced motion verificado com prefers-reduced-motion: reduce — o deslizar do thumb e o anel de foco usam a escala de motion, então os dois colapsam para 1ms sem que o estado deixe de mudar.
Dependências
- Pacotes
- @base-ui/react
- Ícones
- Nenhum
- Construído sobre
- Nenhum
- Usado por
- Nenhum ainda