Pular para o conte√ļdo principal

Checkbox

Vis√£o geral#

O componente checkbox (caixa de sele√ß√£o) √© usado para permitir que o usu√°rio selecione uma ou mais op√ß√Ķes de um n√ļmero limitado de escolhas. As caixas de sele√ß√£o atuam de forma independente, ou seja, a escolha de uma op√ß√£o n√£o afeta as outras caixas e seus status.

Anatomia#

O checkbox é composto por background e border. Também contém partes que são específicas de variação do componente ou estados de interação, como shadow no estado hover.

Anatomia do checkbox disposto lado a lado, sendo 1 border, 2 background, 3 icon, 4 shadow hover e 5 outline

1. Border

2. Background

3. Icon (checked)

4. Shadow (hover)

5. Outline (focused)

Comportamento#

O componente checkbox pode assumir tr√™s 3 varia√ß√Ķes:

  • Unchecked: item desmarcado
  • Checked: item marcado
  • Mixed: quando, em um grupo de checkbox relacionados, alguns itens do grupo (mas n√£o todos) foram marcados

Tamanhos#

O componente possui dois tamanhos diferentes: Medium e Large. O tamanho medium é o tamanho padrão. O large pode ser usado em casos específicos, como em cards por exemplo.

Duas varia√ß√Ķes de tamanho para o checkbox dispostas lado a lado

Os componentes são formados por tokens, sendo estes propriedades de estilo que definem como será estruturado e estilizado. Os tokens que podem ser alterados pelas marcas, podem ser conferidos na seção de propriedades customizáveis.

Boas pr√°ticas#

O componente foi projetado para atender os requisitos das Diretrizes de Acessibilidade para Conte√ļdo Web (WCAG) 2.1. Tamb√©m foram estruturadas padr√Ķes de usabilidade para auxiliar na utiliza√ß√£o do componente e garantir uma boa experi√™ncia para os usu√°rios. Por isso, √© muito importante que, ao aplicar esse componente, o propriet√°rio do conte√ļdo leve em considera√ß√£o alguns crit√©rios e pr√°ticas:

Uso#

  • Ao utilizar label para acompanhar o checkbox, posicione a mesma ao lado direito da caixa de sele√ß√£o;
  • Ordene as op√ß√Ķes de checkbox de forma l√≥gica, como por exemplo em ordem alfab√©tica, numeral ou com base nos itens mais escolhidos;
  • √Č recomend√°vel n√£o utilizar mais do que 7 itens em uma lista de op√ß√Ķes;
  • Use textos curtos e, sempre que poss√≠vel, mantenha a label de uma caixa de sele√ß√£o em uma √ļnica linha;
Checkbox com uma op√ß√£o com texto mais longo, mas em linha √ļnicaFazer

Manter o texto em linha √ļnica facilita a correla√ß√£o entre a label e o seletor.

Checkbox com texto da primeira opção em duas linhasCuidado

Evite textos longos. O texto em duas linhas torna os espa√ßos entre as op√ß√Ķes irregulares.

  • Prefira a utiliza√ß√£o do componente em uma lista vertical ao inv√©s de horizontal, pois permite uma leitura mais f√°cil para os usu√°rios. O alinhamento horizontal dificulta correlacionar as labels √†s caixas correspondentes.
Checkbox com op√ß√Ķes listadas lado a ladoFazer

Alinhe os componentes verticalmente sempre que possível.

Checkbox com op√ß√Ķes listadas lado a ladoCuidado

Ao inserir os componentes lado a lado, certifique-se de inserir um espa√ßamento adequado entre as op√ß√Ķes.

Comportamento#

  • Prefira n√£o deixar nenhuma op√ß√£o pr√©-selecionada, pois pode passar despercebida pelos usu√°rios e ocasionar no envio de uma resposta errada;
  • Se o checkbox estiver acompanhado de outro elemento, como label, √© recomendado que a √°rea clic√°vel envolva o elemento tamb√©m.

Interação#

  • A ordem de foco deve acontecer em sequ√™ncia l√≥gica. Como por exemplo, quando n√£o tem nenhuma op√ß√£o selecionada, o foco deve mover-se para o primeiro item da lista. (WCAG 2.4.3: Focus Order)
  • Com navega√ß√£o via teclado, o checkbox em foco √© marcado ou desmarcado atrav√©s da tecla space

Acessibilidade tratada no componente#

Algumas diretrizes de acessibilidade j√° s√£o tratadas no componente, internamente, e n√£o podem ser alteradas pelo propriet√°rio do conte√ļdo. S√£o elas: