PlumUI

Radio Group

A set of mutually exclusive options. The dot springs in when selected.

InputsRadix Radio Group

Playground

Tweak the props, the preview and the code follow.

Props
<RadioGroup defaultValue="pro">
  <div className="flex items-center gap-2.5">
    <RadioGroupItem value="hobby" id="hobby" />
    <Label htmlFor="hobby">Hobby</Label>
  </div>
  {/* … */}
</RadioGroup>

Installation

npx @plumsydev/plum-ui add radio-group

Also pulls in label automatically.

Usage

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
<RadioGroup defaultValue="a">
  <RadioGroupItem value="a" id="a" />
  <RadioGroupItem value="b" id="b" />
</RadioGroup>

Examples

Cards

RadioGroupCard turns a whole block into a radio.

Controlled

Read the value to drive the rest of the UI.

Email notifications

How often should we write?

One email at 9:00 with everything from the last 24 hours.

API Reference

RadioGroup

Extends Radix RadioGroup.Root.

PropTypeDefault
value

Controlled value.

string—
defaultValue

Uncontrolled initial value.

string—
onValueChange

Called when the selection changes.

(value: string) => void—
orientation

Arrow-key navigation direction.

"horizontal" | "vertical"—

RadioGroupItem

PropTypeDefault
value*

The item value.

string—

RadioGroupCard

A full-width item with a built-in indicator. Children are laid out in a column.

PropTypeDefault
value*

The item value.

string—
PreviousProgressNextRating