Radio Group
One selection from a set of choices.
Upstream documentationExamples
Density
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Radio Group
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/radio-group.json'Usage
A complete example using the installed component and hook paths.
Radio Group usage
"use client";import { useId } from "react";import { Label } from "@/components/ui/label";import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";function RadioGroupPreview() { const id = useId(); return ( <div className="space-y-2"> <span className="text-sm font-medium" id={id}> Density </span> <RadioGroup defaultValue="comfortable" aria-labelledby={id}> {["Compact", "Comfortable", "Spacious"].map((choice) => { const value = choice.toLowerCase(); return ( <div className="flex items-center gap-2" key={choice}> <RadioGroupItem value={value} id={`${id}-${value}`} /> <Label htmlFor={`${id}-${value}`}>{choice}</Label> </div> ); })} </RadioGroup> </div> );}export default function Demo() { return <RadioGroupPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
RadioGroup
RadioGroup props
RadioGroupPrimitive.Props & { sound?: boolean }- sound
- true
RadioGroupItem
RadioGroupItem props
RadioPrimitive.Root.Props & { sound?: boolean }- sound
- true