Radio Button
- Angular:
mds-radio - CSS/HTML (mds-styles): disponível
- Figma: ✅ — abrir Design System 2.0 ↗ (busque pelo frame “Checkbox” dentro do arquivo)
- Tipo: Core
Definição Funcional
Seção intitulada “Definição Funcional”O Radio Button permite que o usuário selecione apenas uma opção de um conjunto de escolhas mutuamente exclusivas. Ele é ideal para exibir todas as alternativas disponíveis de forma clara, permitindo a comparação imediata antes da seleção.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Exclusividade: Selecionar uma nova opção desmarca automaticamente a anterior.
- Seleção Padrão: Sempre apresente um dos botões pré-selecionado por padrão para evitar estados inválidos ou indecisão do usuário.
- Agrupamento: As opções devem estar logicamente relacionadas sob um título de grupo claro.
- Vá Direto ao Ponto: Os rótulos devem ser curtos e positivos. Use Caixa de Sentença.
- Listas Curtas: Utilize Radio Buttons para conjuntos de 2 a 5 opções. Se houver mais, considere um Dropdown para reduzir a carga visual.
- Interatividade: O clique deve ser permitido tanto no círculo quanto no texto do rótulo para facilitar o uso em dispositivos móveis ou tablets de armazém.