Installation
pnpm dlx shadcn@latest add @cortexcn/radio-groupUsage
import { RadioGroup, RadioGroupItem } from "@/components/radio-group";Examples
Basic
import { Field, FieldLabel } from "@/components/field"import { RadioGroup, RadioGroupItem } from "@/components/radio-group"export function RadioGroupBasic() { return ( <div className="flex flex-col gap-6"> <RadioGroup defaultValue="comfortable"> <Field orientation="horizontal"> <RadioGroupItem value="default" id="r1" /> <FieldLabel htmlFor="r1" className="font-normal"> Default </FieldLabel> </Field> <Field orientation="horizontal"> <RadioGroupItem value="comfortable" id="r2" /> <FieldLabel htmlFor="r2" className="font-normal"> Comfortable </FieldLabel> </Field> <Field orientation="horizontal"> <RadioGroupItem value="compact" id="r3" /> <FieldLabel htmlFor="r3" className="font-normal"> Compact </FieldLabel> </Field> </RadioGroup> </div> )}With descriptions
import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/field"import { RadioGroup, RadioGroupItem } from "@/components/radio-group"export function RadioGroupWithDescriptions() { return ( <div className="flex flex-col gap-6"> <RadioGroup defaultValue="plus"> <FieldLabel htmlFor="plus-plan"> <Field orientation="horizontal"> <FieldContent> <div className="font-medium">Plus</div> <FieldDescription> For individuals and small teams </FieldDescription> </FieldContent> <RadioGroupItem value="plus" id="plus-plan" /> </Field> </FieldLabel> <FieldLabel htmlFor="pro-plan"> <Field orientation="horizontal"> <FieldContent> <div className="font-medium">Pro</div> <FieldDescription>For growing businesses</FieldDescription> </FieldContent> <RadioGroupItem value="pro" id="pro-plan" /> </Field> </FieldLabel> <FieldLabel htmlFor="enterprise-plan"> <Field orientation="horizontal"> <FieldContent> <div className="font-medium">Enterprise</div> <FieldDescription> For large teams and enterprises </FieldDescription> </FieldContent> <RadioGroupItem value="enterprise" id="enterprise-plan" /> </Field> </FieldLabel> </RadioGroup> </div> )}With FieldSet
import { Field, FieldDescription, FieldLabel, FieldLegend, FieldSet } from "@/components/field"import { RadioGroup, RadioGroupItem } from "@/components/radio-group"export function RadioGroupWithFieldSet() { return ( <div className="flex flex-col gap-6"> <FieldSet> <FieldLegend>Battery Level</FieldLegend> <FieldDescription> Choose your preferred battery level. </FieldDescription> <RadioGroup defaultValue="medium"> <Field orientation="horizontal"> <RadioGroupItem value="high" id="battery-high" /> <FieldLabel htmlFor="battery-high" className="font-normal"> High </FieldLabel> </Field> <Field orientation="horizontal"> <RadioGroupItem value="medium" id="battery-medium" /> <FieldLabel htmlFor="battery-medium" className="font-normal"> Medium </FieldLabel> </Field> <Field orientation="horizontal"> <RadioGroupItem value="low" id="battery-low" /> <FieldLabel htmlFor="battery-low" className="font-normal"> Low </FieldLabel> </Field> </RadioGroup> </FieldSet> </div> )}Grid layout
import { Field, FieldLabel } from "@/components/field"import { RadioGroup, RadioGroupItem } from "@/components/radio-group"export function RadioGroupGrid() { return ( <div className="flex flex-col gap-6"> <RadioGroup defaultValue="medium" className="grid grid-cols-2 gap-2"> <FieldLabel htmlFor="size-small"> <Field orientation="horizontal"> <RadioGroupItem value="small" id="size-small" /> <div className="font-medium">Small</div> </Field> </FieldLabel> <FieldLabel htmlFor="size-medium"> <Field orientation="horizontal"> <RadioGroupItem value="medium" id="size-medium" /> <div className="font-medium">Medium</div> </Field> </FieldLabel> <FieldLabel htmlFor="size-large"> <Field orientation="horizontal"> <RadioGroupItem value="large" id="size-large" /> <div className="font-medium">Large</div> </Field> </FieldLabel> <FieldLabel htmlFor="size-xlarge"> <Field orientation="horizontal"> <RadioGroupItem value="xlarge" id="size-xlarge" /> <div className="font-medium">X-Large</div> </Field> </FieldLabel> </RadioGroup> </div> )}Disabled
import { Field, FieldLabel } from "@/components/field"import { RadioGroup, RadioGroupItem } from "@/components/radio-group"export function RadioGroupDisabled() { return ( <div className="flex flex-col gap-6"> <RadioGroup defaultValue="option2" disabled> <Field orientation="horizontal"> <RadioGroupItem value="option1" id="disabled-1" /> <FieldLabel htmlFor="disabled-1" className="font-normal"> Option 1 </FieldLabel> </Field> <Field orientation="horizontal"> <RadioGroupItem value="option2" id="disabled-2" /> <FieldLabel htmlFor="disabled-2" className="font-normal"> Option 2 </FieldLabel> </Field> <Field orientation="horizontal"> <RadioGroupItem value="option3" id="disabled-3" /> <FieldLabel htmlFor="disabled-3" className="font-normal"> Option 3 </FieldLabel> </Field> </RadioGroup> </div> )}Invalid
import { Field, FieldDescription, FieldLabel, FieldLegend, FieldSet } from "@/components/field"import { RadioGroup, RadioGroupItem } from "@/components/radio-group"export function RadioGroupInvalid() { return ( <div className="flex flex-col gap-6"> <FieldSet> <FieldLegend>Notification Preferences</FieldLegend> <FieldDescription> Choose how you want to receive notifications. </FieldDescription> <RadioGroup defaultValue="email"> <Field orientation="horizontal" data-invalid> <RadioGroupItem value="email" id="invalid-email" aria-invalid /> <FieldLabel htmlFor="invalid-email" className="font-normal"> Email only </FieldLabel> </Field> <Field orientation="horizontal" data-invalid> <RadioGroupItem value="sms" id="invalid-sms" aria-invalid /> <FieldLabel htmlFor="invalid-sms" className="font-normal"> SMS only </FieldLabel> </Field> <Field orientation="horizontal" data-invalid> <RadioGroupItem value="both" id="invalid-both" aria-invalid /> <FieldLabel htmlFor="invalid-both" className="font-normal"> Both Email & SMS </FieldLabel> </Field> </RadioGroup> </FieldSet> </div> )}Adapted from the shadcn/ui Radio Group (MIT).