Pharos
Navegar componentes
← Componentes

RadioList

RadioExemplo
Um grupo de opções em que apenas uma pode ser selecionada por vez. Todas as opções ficam visíveis simultaneamente, facilitando comparar escolhas. Use-o quando usuários precisarem escolher uma opção de um conjunto pequeno.
Importação
import {RadioList} from '@pharos-ds/core/RadioList';

Exemplos

Área interativa

orientation
size
isDisabled
Canal de notificação
Código
import {RadioList, RadioListItem} from '@pharos-ds/core/RadioList';

<RadioList
  orientation="vertical"
  size="md"
  isDisabled={false}
 />

Boas práticas

  • Faça: Mantenha o número de opções pequeno: tipicamente de 2 a 7 escolhas.
  • Faça: Use labels claros e concisos que diferenciem cada opção de relance.
  • Faça: Pré-selecione uma opção padrão quando houver um padrão sensato; não deixe o grupo vazio a menos que a escolha seja opcional.
  • Evite: Use quando múltiplas seleções forem necessárias; use CheckboxList em vez disso.
  • Evite: Use para listas longas; use Selector para melhor descoberta.
  • Evite: Use layout horizontal com mais de 4 opções; quebra de forma estranha.
  • Evite: Envolva um RadioList desabilitado em Tooltip para explicar por que está desabilitado; controles desabilitados engolem os eventos de hover que o wrapper precisa. Use a prop disabledMessage em vez disso.

Props

PropTipoPadrãoDescrição
label *string—Texto do label do radio group (sempre renderizado para acessibilidade).
value *string—O value atualmente selecionado.
onChange *(value: string) => void—Callback disparado quando o value selecionado muda.
children *ReactNode—Elementos RadioListItem.
isLabelHiddenbooleanfalseSe deve ocultar visualmente o label.
descriptionstring—Texto de description exibido abaixo do label.
orientation'vertical' | 'horizontal''vertical'Direção do layout dos radio items.
isDisabledbooleanfalseSe todos os radio items estão desabilitados.
htmlNamestring—Atributo HTML name compartilhado pelos radio inputs, útil para submissões de formulário. Quando omitido, um name interno único ainda agrupa os radios.
disabledMessagestring—Explica por que o grupo está desabilitado. Aplica-se ao estado desabilitado do grupo inteiro (isDisabled), não por item. Com isDisabled, exibe um tooltip no hover/foco via teclado e mantém os radios focáveis via aria-disabled (seleção permanece bloqueada). Use isto em vez de envolver um RadioList desabilitado em Tooltip. Controles desabilitados engolem os eventos de hover que um Tooltip externo precisa.
isRequiredbooleanfalseSe o radio group é obrigatório.
isOptionalbooleanfalseSe o campo é opcional (mutuamente exclusivo com isRequired).
status{type: 'warning' | 'error' | 'success', message?: string}—Indicador de status ({ type, message }).
size'sm' | 'md''md'Size dos controles radio.
labelTooltipstring—Texto de tooltip para um ícone de info ao lado do label.
widthSizeValue—Largura do campo (número = pixels, string usada como está, ex.: "100%"). Dimensiona o campo inteiro (label, controle e status) para que permaneçam alinhados.
xstyleStyleXStyles—Estilos StyleX para customização de layout (margens, posicionamento, dimensionamento). Deve ser um valor stylex.create(): não um objeto de estilo inline como style={{}}.
Pacote: @pharos-ds/core · Import: @pharos-ds/core/RadioList
RadioList · Pharos