Radio Group

Formulario

Seleção única entre opções mutuamente exclusivas, com variantes bolinha (input) e botão selecionável.

Carregando

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { RadioGroup } from "@trdr/ui/radio-group"

Uso

import { RadioGroup, RadioGroupItem } from "@trdr/ui/radio-group"

export function Exemplo() {
  return <RadioGroup />
}

Variantes

GrupoValoresPadrão
variant
inputbutton
input

Props

RadioGroupPropsestende React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
PropTipoDescrição
variant?RadioGroupVariant
RadioGroupItemPropsestende React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
PropTipoDescrição
variant?RadioGroupVariant

Quando usar

Use radio-group para escolha unica entre opcoes visiveis simultaneamente, dentro de um formulario que so aplica ao confirmar: tipo de ordem (mercado, limite, stop), periodo de um grafico. Corresponde ao "Radio Button" do Hub legado (RadioButton.tsx, familia .trdr-radio), que ja definia as duas variantes visuais preservadas aqui.

Quando nao usar

Nao use radio-group quando mais de uma opcao pode estar marcada ao mesmo tempo: isso e Checkbox (varias caixas independentes) ou ToggleGroup com type="multiple". Nao use a variante button esperando o efeito imediato de um ToggleGroup: semanticamente ainda e role="radio", pensado para formulario, nao para toolbar.

Anatomia

  • RadioGroup (data-slot="radio-group"): a raiz, define variant para todo o grupo e guarda o valor selecionado (controlado ou nao).
  • RadioGroupItem (data-slot="radio-group-item"): cada opcao. O comportamento muda com a variant herdada do grupo (ou sobrescrita por item):
    • input (padrao): a bolinha classica. Renderiza so o indicador central (data-slot="radio-group-indicator"), que so aparece quando selecionado. Rotulo nao faz parte do componente, igual ao Checkbox: envolva o Item num <label htmlFor> apontando para o id dele.
    • button: um botao retangular selecionavel. Aqui o texto vai direto como filho do Item, porque o proprio botao e o rotulo, igual ao legado.

Acessibilidade

O Radix implementa a semantica nativa de radio: o grupo e role="radiogroup", cada item e role="radio" com aria-checked, e so um item do grupo fica no tab order (roving tabindex). Tab entra no item selecionado (ou no primeiro, se nenhum estiver selecionado), Seta move e seleciona automaticamente o proximo item habilitado, Espaco seleciona o item focado. O RadioGroup (Root) precisa de aria-label ou de um <fieldset>/<legend> externo descrevendo o grupo, ja que ele nao renderiza um titulo proprio.

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="radio-group"][data-slot="radio-group-indicator"][data-slot="radio-group-item"]
14 tokens usados
bg-currentbg-surface-secondarybg-transparentborder-borderborder-border-disabledborder-border-strongborder-inputoutline-nonering-offset-2ring-offset-backgroundring-ringtext-b4text-content-disabledtext-foreground