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:

Editar essa página