Controles de seleção

Os elementos que deixam a pessoa escolher opção ou ligar e desligar algo: checkbox, radio e switch.

Hard

O que é

Controles de seleção são os elementos que deixam a pessoa fazer uma escolha na interface. Os três mais comuns são o checkbox, pra marcar várias opções, o radio, pra escolher uma só dentro de um grupo, e o switch, pra ligar e desligar um estado.

A escolha entre eles não é estética, e sim semântica. Você usa radio quando a escolha é exclusiva, como a velocidade de entrega, checkbox quando dá pra marcar várias, como ao filtrar categorias, e switch pra um estado binário, como notificação ligada ou desligada. Quando o controle errado entra no lugar, ele confunde e gera erro.

A consistência também pesa bastante, porque o mesmo controle precisa se comportar igual em todo lugar. E vale sempre dar um retorno visível na hora, pra que a pessoa tenha certeza de que a escolha dela foi registrada.

Em uma frase

Aqui a escolha é única, então é radio e não checkbox, senão a pessoa marca duas opções e o formulário quebra.

A pergunta que ele responde

Quando uso checkbox, quando uso radio e quando uso switch nesse formulário?

Quando usar

Ajuda em formulário, filtro, configuração e qualquer tela em que a pessoa precisa escolher ou alternar um estado.

Como não usar

O cuidado é não trocar os papéis, como usar checkbox pra uma escolha única ou switch onde precisava de várias opções.

Na prática

Pense num time que usa checkbox numa escolha que deveria ser única. As pessoas acabam marcando duas opções e o formulário quebra, e ao trocar por radio o erro some.

Não confunda com

Vale separar checkbox de radio, já que os dois costumam ser confundidos. O checkbox aceita várias opções marcadas ao mesmo tempo, enquanto o radio só deixa uma escolhida dentro do grupo. É essa diferença que define qual usar em cada caso.

D

Em inglês

Selection Controls

Pronúncia

n/a

Também chamado de

selection controls, controles de escolha, checkbox e radio

Origem

n/a

Fonte

Saiba mais

Material Design, documentação sobre selection controls (checkbox, radio button e switch)