Radio
Selecionar uma única opção dentro de uma lista de opções mutuamente excludentes.
- Selecionar uma opção mutuamente excludente: escolher exatamente uma opção de um conjunto onde só uma pode ficar ativa. Ex.: forma de pagamento, tipo de frete ou frequência da assinatura.
- Exibir uma lista de opções predefinidas: mostrar até 7 opções em um formulário ou painel de configurações.
- Apresentar cenários alternativos: oferecer configurações ou modos diferentes que se excluem entre si. Ex.: qualidade de download, local de armazenamento ou frequência de notificações.
- Selecionar múltiplas opções: escolher um ou mais itens de uma lista. Usar Checkbox em vez disso.
- Ativar ou desativar um estado binário: quando é necessário um efeito imediato. Usar Toggle em vez disso.
- Selecionar de uma lista longa: quando há mais de 7 itens disponíveis. Usar Select em vez disso.
- Disparar uma ação: quando o objetivo é executar algo na hora em vez de registrar uma seleção. Usar Button em vez disso.
Variante Default
Variante Button
- Container: bullet de seleção que reflete o estado e recebe a interação.
- Indicator: marca que aparece dentro do container quando a opção está selecionada.
- Label: texto que descreve a opção que o controle representa.
Default: aparência de bullet de seleção; recomendada para listas de seleção verticais, como configurações ou formulários de cadastro.
Button: aparência de botão; recomendada para listas horizontais, como critérios de filtro ou seleção de dados, quando se deseja mais destaque visual.
Usar o Radio em formulários, listas de seleção e painéis de configuração. Combiná-lo com o label que descreve a opção para deixar claro o que a seleção representa.
Usar Radio quando as opções são mutuamente excludentes e só uma pode ser selecionada.
Não usar Radio para selecionar múltiplas opções; usar Checkbox em vez disso.
Apresentar as opções em uma ordem lógica: alfabética, numérica, temporal ou por frequência de uso.
Não randomizar a ordem das opções; dificulta encontrar e comparar alternativas.
Usar a variante Button para grupos curtos (2 a 4 opções) de estados mutuamente excludentes com alta visibilidade.
Não usar a variante Button com muitas opções; a partir de certa quantidade o grupo fica apertado ou quebra linha e perde legibilidade.
Posicionar as opções em uma lista vertical: a relação entre cada controle e seu label fica inequívoca.
Não posicionar as opções em uma linha horizontal: fica ambíguo se o label corresponde ao controle anterior ou ao seguinte.
- Label associado: sempre acompanhar o controle com um label que descreva a opção, para que leitores de tela anunciem corretamente o que é.
- Navegação por teclado: o radio é alcançável com Tab e selecionável com a barra de espaço ou as setas direcionais quando está focado.
- Foco visível: o controle mostra um anel de foco ao navegar com teclado, sem depender do ponteiro.
- Radios agrupados: usar o mesmo atributo name em todos os radios de um grupo, para que só um possa ser selecionado por vez.
O label não só nomeia a opção, mas descreve o que acontece ao escolhê-la. O group label diz sobre o que se escolhe.
- Capitalização: sentence case no group label, no label de opção e no help text.
- Pontuação: sem ponto final no group label e no label de opção. Com ponto final no help text e na mensagem de erro.
- Comprimento: group label, 1 a 3 palavras; até 6 se for uma pergunta direta. Label de opção, preferencialmente 1 a 3 palavras. Help text e erro, 1 frase.
- Label de opção, descrever o resultado: nomeia o que acontece ao escolher aquela opção, não só a categoria. "Entrega expressa", e não "Expressa". "Só eu posso ver", e não "Privado".
- Pré-seleção: pré-selecionar a opção mais provável ou de menor risco quando fizer sentido. Nunca pré-selecionar opções de alto risco (pagamento, privacidade, segurança).
- Opção "Outro": adicionar quando a lista não cobre todos os casos possíveis.
- Opção "Nenhum": adicionar quando a pessoa deveria poder deixar o campo sem seleção.
| Caso | O que fazer |
|---|---|
Label de opção que só nomeia a categoria ("Expressa", "Privado") | Reescrever para descrever o resultado: "Entrega expressa", "Só eu posso ver". |
Group label genérico ("Opções", "Configuração") | Substituir pela categoria real ou por uma pergunta direta: "Método de envio", "Quem pode ver este produto?". |
Lista não exaustiva sem opção "Outro" | Adicionar "Outro". |
Label de opção sem texto visível | Usar aria-label com o mesmo critério: nomeia o resultado da escolha. |
Opção desabilitada por plano ou permissões | Adicionar o contexto no help text do grupo, não no label da opção. |
Instale o componente via terminal.
npm install @nimbus-ds/componentsimport React from "react";
import { Radio } from "@nimbus-ds/components";
const Example: React.FC = () => <Radio name="my-radio" label="Label" />;
export default Example;Propriedades adicionais são repassadas ao elemento <Radio>. Consulte a documentação do elemento input para ver a lista de atributos aceitos.
Radio
| Name | Type | Default | Description |
|---|---|---|---|
name* | string | Name attribute of the input element. | |
as | 'button' | 'radio' | Change the visual style of the radio. |
checked | boolean | Modifies true/false value of the native radio. | |
disabled | boolean | Modifies the native disabled state of the native radio. | |
label | string | Text to be rendered inside the component. |
Radio.Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
width | string | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | |
className | string | ||
as | 'button' | 'radio' | Change the visual style of the radio. |
data-testid | string | This is an attribute used to identify a DOM node for testing purposes. |
Ajude-nos a melhorar a documentação
Encontrou um problema ou tem uma sugestão? Conte para a gente.