Radio Group
Single-choice groups with crisp square controls and pastel checked fills.
radio-group-demo.app
Installation
terminal.sh
npx y2kui@latest add radio-groupUsage
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
export function Example() {
return (
<RadioGroup defaultValue="blue">
<label className="flex items-center gap-2">
<RadioGroupItem value="blue" variant="blue" />
Blueberry
</label>
<label className="flex items-center gap-2">
<RadioGroupItem value="pink" variant="pink" />
Bubblegum
</label>
</RadioGroup>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled selected value. |
defaultValue | string | — | Initial selected value. |
onValueChange | (value: string) => void | — | Called when selection changes. |
disabled | boolean | false | Disables the whole group or an item. |
variant | 'default' | 'blue' | 'pink' | 'mint' | 'lilac' | 'default' | Pastel checked fill for RadioGroupItem. |
Examples
Color variants
radio-group-colors.app