Caixa de rádio

Um grupo de rádio é um agrupamento de botões de rádio que estão relacionados entre si.

As caixas de rádio 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 rádio 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 rádio e o texto de ajuda estão todos em conformidade com a mesma opção de dimensionamento.

Por padrão, os botões de opção não são enfatizados (cinza);
Essa opção é melhor para quando o botão de opçã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 um botão de opção precisa ser notado.

As caixas de rádio podem ser marcados 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 rádio em um estado desabilitado mostra que existe uma seleção, mas não está disponível naquela 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, os botões de opção e o texto de ajuda são exibidos em um estado desabilitado quando a caixa de rádio está desabilitada.

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

Grupos de rádio 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 esclarecer as opções.

Um botão de opção pode ser navegado usando um teclado;
O estado de foco do teclado usa o estado de foco visual do botão de opção e adiciona um anel verde ao botão de opção em foco.

Quando o rótulo de um botão de opção é 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.