componentes / formulário
Radio Group
Escolha exatamente uma opção de um conjunto pequeno, com navegação pelas setas.
522 B gzip client componentbase ui · radio, radio-group
radio-group-default.tsx
import { Radio, RadioGroup } from "@/components/ui/radio-group";
const plans = [
{ value: "free", label: "Free" },
{ value: "pro", label: "Pro" },
{ value: "team", label: "Team" },
];
export default function RadioGroupDefault() {
return (
<RadioGroup aria-label="Plan" className="text-sm" defaultValue="pro">
{plans.map((p) => (
<label className="flex items-center gap-2" htmlFor={p.value} key={p.value}>
<Radio id={p.value} value={p.value} /> {p.label}
</label>
))}
<label className="flex items-center gap-2 text-muted-foreground" htmlFor="enterprise">
<Radio disabled id="enterprise" value="enterprise" /> Enterprise (contact us)
</label>
</RadioGroup>
);
}Instalação
$ npx shadcn@latest add https://cd-ui.vercel.app/r/radio-group.jsonprimeira vez? configure o components.json e o tema antes: veja instalação.
Uso
import { Radio, RadioGroup } from "@/components/ui/radio-group"
<RadioGroup aria-label="Plan" defaultValue="pro">
<label className="flex items-center gap-2">
<Radio value="free" /> Free
</label>
<label className="flex items-center gap-2">
<Radio value="pro" /> Pro
</label>
</RadioGroup>API
RadioGroup
Base UI · RadioGroupGrupo de opções excludentes. Dê um nome com aria-label ou um label visível.
| prop | tipo | padrão |
|---|---|---|
value · defaultValueValor controlado ou inicial. | string | - |
onValueChangeChamado ao escolher outra opção. | (value) => void | - |
namePara enviar em formulário. | string | - |
disabled · requiredEstados desativado e obrigatório. | boolean | - |
classNameClasses extras, mescladas com | string | - |
Radio
Base UI · Radio.RootUma opção. O ponto interno cresce em 160ms ao ser escolhida.
| prop | tipo | padrão |
|---|---|---|
valueValor da opção. | string | - |
classNameClasses extras, mescladas com | string | - |
Teclado
| tecla | ação |
|---|---|
| ↑↓←→ | Move a seleção entre as opções. |
| Tab | Entra e sai do grupo. |
| Space | Escolhe a opção em foco. |
Acessibilidade
- Envolva cada
Radionum<label>para o texto ser o nome acessível e clicar nele escolher a opção.