Y2K UI

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-group

Usage

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

PropTypeDefaultDescription
valuestringControlled selected value.
defaultValuestringInitial selected value.
onValueChange(value: string) => voidCalled when selection changes.
disabledbooleanfalseDisables 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

On this page