Checkbox
Resumo
Um checkbox, também chamado de caixa de seleção ou caixa de marcação, é um elemento gráfico na interface do usuário que permite que o usuário selecione ou desselecione uma ou mais opções.
Ele pode ser utilizado sozinho ou em grupo. Quando sozinho, ele oferece uma opção binária de selecionado ou desselecionado, como em situações de aceitação de termos de uso, por exemplo. Quando em grupo, ele permite selecionar uma ou mais opções de uma lista pré-definida.
Anatomia
Checkbox: Composto por uma caixa e um ícone de marcação.
Label: Quando o checkbox está acompanhado de um label, ele passa a ser tratado como um item de um grupo.
Bordas: Em navegação via teclado ela se destaca
A adição de um icone pode tornar uma lista de caixas de seleção mais atraente e convidativa
No entanto, esse estilo nem sempre é prático: os ícones necessários para suas opções podem não estar prontamente disponíveis.
Estados de interação
Cada estado tem um jeito de ser mostrado visualmente:
Default: Estado padrão do componente
Focus: Utilizado por navegação via teclad
Disabled: Não permite interação (50% opacity)
Read Only: O texto permanece ativo para leitura, mas o elemento não permite interação direta.
Error: Indica que o campo precisa de atenção. O estilo visual pode variar, embora o vermelho seja comum, a mensagem de erro adjacente muitas vezes já supre a necessidade de comunicação visual.
Estados de seleção
Cada estado tem um jeito de ser mostrado visualmente:
Unselected: Estado inicial padrão
Selected: Quando o usuário seleciona
Indeterminate: Estado que indica que, dentro de um grupo de checkboxes, algum está selecionado, mas não todos.
Quando usar
Radiobutton | Checkbox | Checkbox único | Toggle | Dropdown | |
|---|---|---|---|---|---|
Quantas opções podem ser selecionadas? | Uma | Múltiplas | Única | Única | Depende do contexto |
Ordem de execução | Após enviar | Após enviar | Após enviar | Na hora | Após enviar |
Há opção padrão? | Sim | Não | Sim | Sim | Depende do contexto |
Cenários de uso | Seleção única obrigatória dentro de um grupo de opções mutuamente exclusivas | Seleção múltipla dentro de uma lista finita onde o usuário pode escolher zero, uma ou várias opções. | Termos de uso; Manter conectado em login; Não mostrar novamente | Opções que uma é o estado oposta da outra, geralmente em menus e configurações | Opções com espaço limitado; Quantidade de opções muito alta |
Acessibilidade
A
AA
AAA
Boas práticas
Permita o usuário alternar o estado do checkbox clicando na label
Por ser um componente pequeno, é aconcelhável permitir que o usuário toque em uma área mais ampla para facilitar a ação.
Ao escrever as labels, crie um padrão de capitalização das letras, palavras, frases, orações e pontuações
Referências
https://componentes.design/aulas/checkbox
https://uiplaybook.dev/play/checkbox
https://balsamiq.com/learn/checkboxes/
https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/