Caixa de seleção | Design System

Caixas de seleção

Um grupo de caixas de seleção é um agrupamento de caixas de seleção relacionadas entre si.

As caixas de seleção devem sempre ter um rótulo;
Em casos raros em que o contexto é suficiente e um especialista em acessibilidade revisou o design, o rótulo pode ficar indefinido.

As etiquetas podem ser colocadas na parte superior ou na lateral;
Os rótulos superiores são o padrão e são recomendados porque funcionam melhor com textos longos, localização e layouts responsivos;
As etiquetas laterais são mais úteis quando o espaço vertical é limitado.

As caixas de seleção vêm em quatro tamanhos diferentes: pequeno, médio, grande e extragrande;
O tamanho médio é a opção padrão e mais usada;
Use os outros tamanhos com moderação; eles devem ser usados para criar uma hierarquia de importância dentro da página;
O rótulo do campo, as caixas de seleção e o texto de ajuda estão todos em conformidade com a mesma opção de dimensionamento.

Por padrão, as caixas de seleção não são enfatizados (cinza);
Essa versão é ideal para quando a caixa de seleção não é a parte central de uma interface, como em painéis de aplicativos, onde todos os componentes visuais são monocromáticos para direcionar o foco ao conteúdo;
A versão enfatizada (verde) fornece um destaque visual que é melhor para formulários, configurações, listas ou grades de ativos e outras situações em que uma caixa de seleção precisa ser notada.

As caixas de seleção podem ser marcadas como tendo um erro para mostrar que uma seleção precisa ser feita para avançar ou que uma seleção feita é inválida;
O erro é indicado com um texto de ajuda negativo , junto com um ícone.

As caixas de seleção em um estado desabilitado mostra que existe uma seleção, mas não está disponível nessa circunstância;
Isso pode ser usado para manter a continuidade do layout e comunicar que uma ação pode ficar disponível posteriormente;
O rótulo do campo, as caixas de seleção e o texto de ajuda são exibidos em um estado desativado.

As caixas de seleção tem uma opção somente leitura para quando o conteúdo no estado desabilitado ainda precisa ser exibido;
Isso permite que o conteúdo seja copiado, mas não interagido ou alterado.

As caixas de seleção devem usar texto de ajuda para mensagens de erro e descrições;
As descrições são valiosas para fornecer contexto por que uma seleção é necessária ou para explicar as opções.

Uma caixa de seleção pode ser navegada usando um teclado;
O estado de foco do teclado usa o estado de foco visual da caixa de seleção e adiciona um anel azul à caixa de seleção em foco.

Quando o rótulo é muito longo para o espaço horizontal disponível, ele é quebrado para formar outra linha.

Caixas de seleção e botões de opção (rádio) não possuem a mesma funcionalidade;
As caixas de seleção devem ser usadas para selecionar quantas opções desejar (ou nenhuma);
Um conjunto de botões de opção (rádio) deve ser usado para selecionar apenas uma única opção de uma lista de opções mutuamente exclusivas.