Checkbox, radio ou switch?
A diferença está no modelo de escolha e no momento em que a mudança é aplicada.
| Controle | Pergunta que responde | Uso típico |
|---|---|---|
| Checkbox | Quais destas opções você quer? | Escolher vários assuntos. |
| Radio | Qual destas opções você quer? | Escolher um método de entrega. |
| Switch | Esta configuração está ligada? | Ativar uma preferência imediatamente. |
| Select | Qual valor desta lista você escolhe? | Selecionar um estado. |
Escolha pelo comportamento
Um grupo de checkbox permite combinações. Um grupo de radio representa alternativas mutuamente exclusivas. O switch funciona bem para uma configuração binária aplicada no momento da alteração.
Se as escolhas só serão aplicadas depois de tocar em Salvar, caixas de seleção costumam comunicar melhor esse compromisso adiado. Quando todas as opções precisam ser comparadas, radio pode ser mais claro que um select fechado.
Rótulos que não mudam de sentido
Prefira “Receber notificações” a trocar entre “Ativar” e “Desativar” como rótulo de um switch. O nome identifica a configuração e o estado indica se ela está ligada. Use texto e posição, além da cor.
Agrupamento importa
Em HTML, fieldset e legend ajudam a estabelecer a pergunta comum de um grupo. Radios do mesmo grupo precisam compartilhar o mesmo name. Rótulos associados aumentam a área clicável e ajudam leitores de tela.
Para aprofundar: referência oficial ↗. Os exemplos e as explicações desta página são conteúdo editorial da Biblioteca UI.
Encontrar um componente →