Radio group

Picks one option out of a few. Arrow keys move the choice, as the platform expects. For a long list, use Select.

Installation

npx rasengan-ui add radio-group

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/radio-group.json

Usage

import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 
export function Plan() {
  return (
    <RadioGroup defaultValue="team" aria-label="Plan">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="solo" id="solo" />
        <Label htmlFor="solo">Solo</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="team" id="team" />
        <Label htmlFor="team">Team</Label>
      </div>
    </RadioGroup>
  );
}

Tones

tone on the RadioGroup colours every item's checked ring and dot; an item can set its own. Checked, the ring takes the tone's edge, which holds 3:1 against the page: the colour itself, or for warning, whose amber is too light for that, its darker text colour.

Sizes

sm, default and lg on the RadioGroup, at the village's indicator sizes; an item can set its own.

Villages

Round in Konoha and Kiri, square in Iwa (its pill radius is 0); the dot is the nature's primary.

Accessibility

• A radiogroup of radio buttons: name the group with aria-label, or with a Field's label.
• Tab reaches the checked option; arrow keys move and check the next one.

API reference

The parts of Base UI's Radio Group:

radioVariants({ tone, size }) returns an item's classes.