Radio Group

Overview

Radio Group lets users pick exactly one option from a small, visible set — permission levels, plans, or any mutually exclusive choice. It’s built on Radix UI Radio Group, so arrow keys move between options, only one can be selected at a time, and the group is exposed correctly to assistive technology.

It is a compound component: a RadioGroup wraps a set of RadioGroupItems. Pair each item with a Label so the choice has a visible, clickable caption. Use it for a handful of always-visible options; when space is tight or the list is long, prefer a Select or Radio Dropdown.

Usage

Import the parts:

import { RadioGroup, RadioGroupItem, Label } from "@eqtylab/equality";

Give each RadioGroupItem an id and point its Label at it with htmlFor, so clicking the label selects the option:

const [value, setValue] = useState("read");

<RadioGroup value={value} onValueChange={setValue}>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="read" id="read" />
    <Label htmlFor="read">Read Only</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="write" id="write" />
    <Label htmlFor="write">Read & Write</Label>
  </div>
</RadioGroup>;

Radio Group can be controlled (value + onValueChange) or uncontrolled (defaultValue).

Default

Slots

Props

Both parts forward their Radix props (and className). The most commonly used are below.