ui
GitHub

Radio Group

A set of radio buttons for selecting one option from a group.

Docs
Select a plan
radio-group-demo.tsx
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 
export function RadioGroupDemo() {
	return (
		<RadioGroup aria-labelledby="radio-group-plan">
			<div id="radio-group-plan" className="text-foreground font-medium">
				Select a plan
			</div>
			<Label className="flex items-center gap-2">
				<RadioGroupItem id="basic" value="basic" />
				Basic
			</Label>
			<Label className="flex items-center gap-2">
				<RadioGroupItem id="standard" value="standard" />
				Standard
			</Label>
			<Label className="flex items-center gap-2">
				<RadioGroupItem id="premium" value="premium" />
				Premium
			</Label>
		</RadioGroup>
	)
}

Installation

npx shadcn@latest add https://9ui.dev/r/radio-group.json

Usage

Imports
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
Anatomy
<RadioGroup>
	<RadioGroupItem />
</RadioGroup>

Examples

Disabled

Notifications
radio-group-disabled.tsx
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 
export function RadioGroupDisabled() {
	return (
		<RadioGroup disabled aria-labelledby="radio-group-notifications">
			<div
				id="radio-group-notifications"
				className="text-foreground font-medium"
			>
				Notifications
			</div>
			<Label className="flex items-center gap-2">
				<RadioGroupItem id="email" value="email" />
				Email
			</Label>
			<Label className="flex items-center gap-2">
				<RadioGroupItem id="sms" value="sms" />
				SMS
			</Label>
			<Label className="flex items-center gap-2">
				<RadioGroupItem id="email-and-sms" value="email-and-sms" />
				Email & SMS
			</Label>
		</RadioGroup>
	)
}