Radio

2.4.0

Selecionar uma única opção dentro de uma lista de opções mutuamente excludentes.

Ver no Figma

Quando usar

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.

Quando não usar

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.

Anatomia

Opção

Variante Default

Opção

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.

Variantes

Aparência

Opção

Default: aparência de bullet de seleção; recomendada para listas de seleção verticais, como configurações ou formulários de cadastro.

Opção

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.

Estados

Aplicação

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.

Forma de envio

Envio padrão

Envio expresso

Retirada na loja

Do and Don'ts

Acessibilidade

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.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/components

import React from "react";
import { Radio } from "@nimbus-ds/components";

const Example: React.FC = () => <Radio name="my-radio" label="Label" />;

export default Example;

Props

Propriedades adicionais são repassadas ao elemento <Radio>. Consulte a documentação do elemento input para ver a lista de atributos aceitos.

Componentes relacionados

Checkbox — Para selecionar uma ou mais opções de uma lista.
Toggle — Para ativar ou desativar uma configuração com efeito imediato.
Select — Para selecionar uma única opção de uma lista longa (mais de 7 itens).

Radio

Name	Type	Default	Description
name*	string		Name attribute of the input element.
as	'button' 'radio'	'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'	'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.

Compartilhe seu feedback