Radio

O componente Radio nos permite escolher uma única opção dentro de uma lista de seleção.

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

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

export default Example;

Ver no Figma

Anatomia do componente

O componente é composto por um bullet ou botão de seleção com seus respectivos estados, além de um label que exibe o conteúdo referente a opção.

Guidelines

Utilizamos esse componente quando precisamos que o usuário insira informações em um formulário, marcando uma única opção dentro de uma lista de até 7 itens.

Radio default

Essa variante possui menos destaque visual, por isso pode ser utilizadas em listas de seleção verticais, como em configurações ou formulários de cadastro.

Radio button

Essa variante possui mais destaque visual, por isso pode ser utilizada em listas horizontais como critérios dentro de um filtro de dados.

Estados possíveis

O componente possui 3 estados, podendo ser utilizadas de acordo com o contexto e necessidade da aplicação.

Rest - é usado para representar uma opção não selecionado
Checked - é usado para representar uma opção selecionado
Disabled - é usado para representar que uma opção está desabilitada, esse estado pode ser combinado com os 2 anteriores

Labels

O componente sempre deve ser acompanhado de um label que descreve claramente a opção representada, sempre iniciando com a primeira letra maiúscula, e as frases nunca devem terminar em ponto ou vírgula. As opções devem ser ordenadas utilizando um critério lógico específico (alfabético, numérico, temporal, etc.).

Aria Label

Para facilitar a navegação de pessoas com algum tipo de limitação visual ou cognitiva, esse componente possui uma tag (Aria Label) para informar qual o status atual do Radio.

Recomendação de uso

Seleção de itens em listas onde a escolha é obrigatória
Selecionar uma única configuração em uma lista de opções

Componentes relacionados

Select - Pode ser usado para selecionar uma única opção em uma lista com mais de 7 itens
Toggle - Pode ser usado para selecionar opções binárias como liga e desliga
Checkbox - Pode ser usado para selecionar múltiplas opções em uma lista

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/radio

Props

Additional props are passed to the <Radio> element. See input docs for a list of props accepted by the <Radio> element.