Radio Group

Forms

A set of radio buttons for selecting a single option from a list. Use radio groups when users must choose exactly one option.

Import

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

Usage

Basic Radio Group

Standard radio button group

Product Selection

Real-world example with product categories

Disabled State

Radio group with disabled options

API Reference

PropTypeDefaultDescription
valuestringThe controlled value of the selected radio
defaultValuestringThe default selected value (uncontrolled)
onValueChange(value: string) => voidHandler called when selection changes
disabledbooleanfalseWhether the entire group is disabled

Related Components