Radio Group

A set of mutually exclusive options.

Overview

Radio Group renders native radio inputs that share a name. Use it when a person must choose one option. Arrow keys move between the options, which is the browser's radio behavior. The group does not validate the field or store form state beyond the selected value.

Preview

Customize

Disabled
Required

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add radio-group

Usage

import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

export function SpacingField() {
  return (
    <RadioGroup defaultValue="comfortable" name="spacing">
      <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>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="compact" id="r3" />
        <Label htmlFor="r3">Compact</Label>
      </div>
    </RadioGroup>
  );
}

Examples

Options

defaultValue selects one option. The others stay unchecked.

Disabled option

One option can be disabled while the others stay available.

Disabled group

disabled on RadioGroup disables every item.

In practice

Plan and shipping are separate radio groups. Continue submits the selection.

Plan

$12 / month · one workspace

$29 / month · unlimited members

$79 / month · SSO and audit log

Shipping

API

Other attributes for the underlying element are passed through.

NameTypeDefaultDescription
valuestring—On RadioGroup, the controlled selection. On RadioGroupItem, the option value.
defaultValuestring—Uncontrolled initial selection for RadioGroup.
onValueChange(value: string) => void—Called with the newly selected item value.
namestring—Shared by the items so the browser treats them as one group and submits one value.
disabledboolean—On the group, disables every item. On an item, disables that option.
requiredboolean—Requires a selection when the group is in a form.
classNamestring—Merged with cn on the group or the item.

Accessibility

The group is a radiogroup. Each item is a native radio input. Items do not add an extra ARIA role.

  • Name each option with a label whose htmlFor matches the item id.
  • Items in one group share a name, so the browser selects only one and submits that value.
  • Arrow keys move the selection. Space selects the focused option.
  • disabled on the group disables every item. disabled on an item disables that option.
  • Focus uses a visible focus-visible ring on the radio.