Radio Group

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

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/radio-group.tsx
Import from@viliha/vui-react/radio-group

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

Usage

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

radio-group-demo.tsx
import { RadioGroup, RadioGroupItem } from "@viliha/vui-react/radio-group";
import { Label } from "@viliha/vui-react/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>
  );
}

RadioGroup props

It takes no props of its own. Everything you pass reaches the underlying RadioGroupPrimitive.Root primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

RadioGroupItem props

It takes no props of its own. Everything you pass reaches the underlying RadioGroupPrimitive.Item primitive, so every attribute it accepts works here unchanged and nothing is invented on top.