Checkboxes (caixas de seleção)

Componente que deixa a pessoa marcar uma ou várias opções de uma lista.

Hard

O que é

Checkbox é uma caixa pequena que a pessoa marca ou desmarca pra selecionar algo. Diferente do radio button, que so aceita uma escolha por grupo, o checkbox permite marcar várias opções ao mesmo tempo. Por ser simples e reconhecível, ele está em todo lugar, tanto na web quanto no mobile.

Em UX, ele dá clareza e controle, porque a pessoa consegue escolher mais de uma opção sem perder o contexto. Ele aparece em pergunta de pesquisa, configuração de preferência e ação em lote num dashboard. O desenho precisa equilibrar algumas coisas: ser grande o bastante pra tocar, ter estado claro de marcado e desmarcado, e um rótulo direto pra evitar erro.

Acessibilidade também é parte do trabalho aqui: ser compatível com leitor de tela, navegável por teclado, ter alvo grande pra quem tem limitação motora e contraste suficiente entre os estados. Dá pra estilizar o checkbox pra marca, mas a usabilidade vem primeiro, porque uma caixa que ninguém reconhece deixa de funcionar como checkbox.

Em uma frase

Aqui dá pra marcar mais de uma, então é checkbox, não radio button.

A pergunta que ele responde

Quando uso checkbox e quando uso radio button numa lista de opções?

Quando usar

Quando a pessoa pode escolher várias opções de uma lista, ou ligar e desligar uma preferência.

Como não usar

O erro é usar checkbox quando so uma opção é válida, caso em que o certo é radio button, ou estilizar tanto a caixa que ninguém reconhece mais que ali se marca algo.

Na prática

Pense no Gmail, onde a pessoa marca vários e-mails com checkbox e arquiva todos de uma vez, em vez de abrir um por um. É a escolha múltipla resolvendo a tarefa de forma rápida.

Não confunda com

Vale separar checkbox de radio button, porque a diferença está em quantas opções a pessoa pode marcar. O checkbox aceita várias opções marcadas ao mesmo tempo, enquanto o radio button aceita so uma por grupo. Então, sempre que mais de uma escolha for possível, o checkbox é o caminho; quando so uma faz sentido, é radio button.

D

Em inglês

Checkboxes

Pronúncia

tchék-bóks

Também chamado de

checkbox, caixa de seleção, caixa de marcar

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre checkboxes e radio buttons