Radio Group

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

Docs
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="font-medium text-foreground">
				Select a plan
			</div>
			<div className="flex items-center space-x-2">
				<RadioGroupItem id="basic" value="basic" />
				<Label htmlFor="basic">Basic</Label>
			</div>
			<div className="flex items-center space-x-2">
				<RadioGroupItem id="standard" value="standard" />
				<Label htmlFor="standard">Standard</Label>
			</div>
			<div className="flex items-center space-x-2">
				<RadioGroupItem id="premium" value="premium" />
				<Label htmlFor="premium">Premium</Label>
			</div>
		</RadioGroup>
	)
}

Installation

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

Usage

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

Examples

Disabled

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="font-medium text-foreground"
			>
				Notifications
			</div>
			<div className="flex items-center space-x-2">
				<RadioGroupItem id="email" value="email" />
				<Label htmlFor="email">Email</Label>
			</div>
			<div className="flex items-center space-x-2">
				<RadioGroupItem id="sms" value="sms" />
				<Label htmlFor="sms">SMS</Label>
			</div>
			<div className="flex items-center space-x-2">
				<RadioGroupItem id="email-and-sms" value="email-and-sms" />
				<Label htmlFor="email-and-sms">Email & SMS</Label>
			</div>
		</RadioGroup>
	)
}