Uranus Design System

RadioGroup agrupa várias opções das quais exatamente uma pode ser selecionada. Prefira sobre um Select quando a lista tem até cinco opções e faz sentido deixá-las todas visíveis ao mesmo tempo.

Mensal

Anual (economize 20%)

Vitalício

import { Label, RadioGroup, RadioGroupItem } from '@uranus-workspace/design-system';

export default function RadioGroupDefault() {
  return (
    <RadioGroup defaultValue="monthly">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="monthly" id="billing-monthly" />
        <Label htmlFor="billing-monthly">Mensal</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="yearly" id="billing-yearly" />
        <Label htmlFor="billing-yearly">Anual (economize 20%)</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="lifetime" id="billing-lifetime" />
        <Label htmlFor="billing-lifetime">Vitalício</Label>
      </div>
    </RadioGroup>
  );
}

Anatomia

RadioGroup — o contêiner raiz que gerencia o estado da seleção.
RadioGroupItem — cada botão de rádio individual. Usa value como identificador.
Label — um Label associado a cada item via htmlFor.

Por padrão os itens empilham verticalmente. Para grupos curtos com rótulos curtos, uma orientação horizontal reduz a altura do formulário. Passe orientation="horizontal" para que leitores de tela usem as setas esquerda/direita.

Pequeno

Médio

Grande

import { Label, RadioGroup, RadioGroupItem } from '@uranus-workspace/design-system';

export default function RadioGroupHorizontal() {
  return (
    <RadioGroup
      defaultValue="md"
      orientation="horizontal"
      className="flex flex-row items-center gap-6"
    >
      <div className="flex items-center gap-2">
        <RadioGroupItem value="sm" id="size-sm" />
        <Label htmlFor="size-sm">Pequeno</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="md" id="size-md" />
        <Label htmlFor="size-md">Médio</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="lg" id="size-lg" />
        <Label htmlFor="size-lg">Grande</Label>
      </div>
    </RadioGroup>
  );
}

Uso

import { Label, RadioGroup, RadioGroupItem } from '@uranus-workspace/design-system';

<RadioGroup defaultValue="monthly">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="monthly" id="r1" />
    <Label htmlFor="r1">Mensal</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="yearly" id="r2" />
    <Label htmlFor="r2">Anual</Label>
  </div>
</RadioGroup>

Faça

Sempre declare um valor padrão com defaultValue ou value — nenhum rádio selecionado é um estado confuso.
Mantenha os rótulos curtos e paralelos entre si (mesmas classes gramaticais).
Use um FieldLegend ou título acima do grupo descrevendo o que está sendo escolhido.

Não faça

Não use RadioGroup para mais de cinco opções — prefira Select.
Não misture rádios com checkboxes dentro do mesmo grupo visual.
Não dependa de cor para indicar qual opção está selecionada — o ícone interno já cumpre esse papel.

Acessibilidade

Teclado: Tab entra no grupo, as setas (↑/↓ ou ←/→ no horizontal) movem entre os itens e já selecionam automaticamente.
O componente é construído sobre @radix-ui/react-radio-group, que expõe role="radiogroup" e aria-checked nativamente.
Associe o grupo a um rótulo visível via FieldLegend ou aria-labelledby.

RadioGroup

Anatomia

Orientação

Uso

Faça

Não faça

Acessibilidade

On this page