Pular para o conte√ļdo principal

Radio

Vis√£o geral#

O componente radio button é utilizado para escolher uma opção dentre outras, ou seja, apenas um item pode ser selecionado por vez. Quando um usuário seleciona um novo item, a escolha anterior é automaticamente desmarcada.

Componentes relacionados

Anatomia#

O radio button é 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 radio button disposto lado a lado, sendo 1 border, 2 background, 3 fill, 4 shadow hover e 5 outline

1. Border

2. Background

3. Fill (checked)

4. Shadow (hover)

5. Outline (focused)

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 radio 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#

  • Ordene as op√ß√Ķes de radio de forma l√≥gica, como por exemplo em ordem alfab√©tica, numeral ou com base nos itens mais escolhidos;
  • Ao utilizar labels para acompanhar os radio butons, as mesmas devem ser apresentadas ao lado direito do componente;
Radio button com label `Opção A` à direita.Fazer

Labels ao lado esquerdo do radio button para facilitar a leitura.

Label `Opção A` e um radio button à esquerdaNão fazer

Label ao lado esquerdo podem confundir o usu√°rio.

  • 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 ao seus radio buttons correspondentes.
Radio button com op√ß√Ķes listadas uma embaixo da outraFazer

Alinhe os componentes verticalmente sempre que possível.

Radio button 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 de radio pr√©-selecionada, pois pode passar despercebida pelos usu√°rios e ocasionar no envio de uma resposta errada;
  • Os usu√°rios n√£o podem voltar a n√£o ter nenhuma op√ß√£o selecionada depois de escolher uma, sem atualizar a janela do navegador. Portanto, se fizer sentido para o contexto, √© importante incluir uma sa√≠da para o usu√°rio, como por exemplo uma alternativa de "Nenhuma das op√ß√Ķes acima" ou "Prefiro n√£o responder".
  • Se o radio button estiver acompanhado de outro elemento, como label ou √≠cone, √© recomendado que a √°rea clic√°vel envolva o elemento tamb√©m.

Interação#

  • A intera√ß√£o de foco deve compor o componente, sendo a navega√ß√£o por mouse ou teclado, e em sequ√™ncia l√≥gica. Como por exemplo, quando n√£o tem nenhuma op√ß√£o selecionada, o foco deve mover-se para o primeiro bot√£o da lista. (WCAG 2.4.3: Focus Order)

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: