Components
RadioGroup
A group of mutually exclusive radio buttons.
RadioGroup is built on the Base UI RadioGroup primitive. It renders a set of mutually exclusive options.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/radio-group.jsonUsage
"use client";
import {
RadioGroup,
RadioGroupItem,
} from "@/components/ui/radio-group";
export default function Example() {
return (
<RadioGroup defaultValue="option-1">
<div className="flex items-center gap-2">
<RadioGroupItem value="option-1" id="option-1" />
<label htmlFor="option-1">Option one</label>
</div>
<div className="flex items-center gap-2">
<RadioGroupItem value="option-2" id="option-2" />
<label htmlFor="option-2">Option two</label>
</div>
</RadioGroup>
);
}Examples
Default
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
RadioGroupdata-slot="radio-group" | RadioGroupBase UI | — |
RadioGroupItemdata-slot="radio-group-item" | Radio.RootBase UI | — |
Changelog
Full RadioGroup historyLast updated on