Toggle
Botão de alternância, que fica pressionado, como o Negrito num editor. O ToggleGroup junta vários, com um ou muitos pressionados e navegação pelas setas.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar.
import { Toggle, ToggleGroup } from "@camaleo/react";Anatomia
Um Toggle é um botão com aria-pressed. O ToggleGroup junta vários e move o foco entre eles com as setas.
Exemplos
Com rótulo
Um ícone e um rótulo curto. O rótulo dá nome à opção, não ao estado.
As notificações estão ativas.
Controlado
Clique. Com pressed e onPressedChange, o resto da tela reage ao estado.
Um entre vários
O ToggleGroup deixa só um pressionado, como o alinhamento do texto. As setas passam de uma opção para outra.
Vários ao mesmo tempo
Com multiple, qualquer quantidade fica pressionada: negrito, itálico e sublinhado juntos.
Só ícone, com tooltip
O aria-label é o próprio texto do tooltip: o leitor de tela fala o mesmo nome que quem enxerga vê ao passar o mouse.
Desativado
Mantém o estado pressionado visível, para a pessoa ainda ver o que está ligado.
Em contexto
Projetos
Atlas
Atualizado há 2 horas
Boas práticas
O visual pressionado mostra o estado; o leitor de tela anuncia pelo aria-pressed.
"Enviar" acontece uma vez. Use um Button.
O ToggleGroup dá a elas uma só parada de Tab e navegação pelas setas.
Dois alinhamentos pressionados juntos é um estado que não faz sentido.
Props
O ToggleGroup recebe value, defaultValue e onValueChange (listas com o value dos toggles), multiple e orientation.
Styling hooks
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- Toggle só com ícone precisa de aria-label; o estado vem do aria-pressed, então o rótulo nunca muda.
- Dê a todo ToggleGroup um aria-label com o nome da opção ("Alinhamento").
- O visual pressionado tem contraste de 3:1 contra o solto em todos os estilos.