npm

Radio Group

Radio Group is a set of options where the user can select exactly one.

Installation

pnpm add @viliha/vui-ui

Then import from @viliha/vui-ui/radio-group.

Usage

Pair each `RadioGroupItem` with a `Label` via matching id.

radio-group-demo.tsx
import { RadioGroup, RadioGroupItem } from "@viliha/vui-ui/radio-group";
import { Label } from "@viliha/vui-ui/label";

export function Example() {
  return (
    <RadioGroup defaultValue="comfortable">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="default" id="r1" />
        <Label htmlFor="r1">Default</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="comfortable" id="r2" />
        <Label htmlFor="r2">Comfortable</Label>
      </div>
    </RadioGroup>
  );
}