Radio Group

Demos

Pick one option from a short list.

How often do you exercise?

Every dayA few times a weekRarely

"use client"

import { RadioGroup, RadioGroupItem } from "@workspace/ui/components/radio-group"

export function RadioGroupDemo() {
  return (
    <div className="grid w-full max-w-xs gap-3">
      <p id="exercise-frequency" className="text-xs font-medium">
        How often do you exercise?
      </p>
      <RadioGroup defaultValue="weekly" aria-labelledby="exercise-frequency">
        <label className="flex items-center gap-2 text-xs">
          <RadioGroupItem value="daily" />
          Every day
        </label>
        <label className="flex items-center gap-2 text-xs">
          <RadioGroupItem value="weekly" />
          A few times a week
        </label>
        <label className="flex items-center gap-2 text-xs">
          <RadioGroupItem value="rarely" />
          Rarely
        </label>
      </RadioGroup>
    </div>
  )
}

Usage

Use a radio group when the reader picks exactly one option from a short list, and seeing all options helps them choose. For more than about six options, use a select. For an on and off choice, use a Switch.

Import it from @workspace/ui/components/radio-group.

Anatomy

RadioGroup — Holds the selected value. Lays items out in a grid.
RadioGroupItem — One option. Wrap it in a label with its text.

Notes

Arrow keys move between options. Tab moves out of the group.
Name the group with aria-label or a visible heading linked by aria-labelledby.
Pick a sensible default when there is one, so the reader does not have to.

Examples

Disabled

Disable a single item, or the whole group with disabled on RadioGroup.

Home visitClinicSelf-collection kit (unavailable)

"use client"

import { RadioGroup, RadioGroupItem } from "@workspace/ui/components/radio-group"

export function RadioGroupDisabled() {
  return (
    <RadioGroup defaultValue="home" aria-label="Collection" className="w-full max-w-xs">
      <label className="flex items-center gap-2 text-xs">
        <RadioGroupItem value="home" />
        Home visit
      </label>
      <label className="flex items-center gap-2 text-xs">
        <RadioGroupItem value="clinic" />
        Clinic
      </label>
      <label className="flex items-center gap-2 text-xs text-muted-foreground">
        <RadioGroupItem value="kit" disabled />
        Self-collection kit (unavailable)
      </label>
    </RadioGroup>
  )
}

Cards

Wrap each item in a bordered label to make a larger target.

Essential40 biomarkers, once a year.Complete100 biomarkers, twice a year.

"use client"

import { RadioGroup, RadioGroupItem } from "@workspace/ui/components/radio-group"

const plans = [
  { value: "essential", title: "Essential", description: "40 biomarkers, once a year." },
  { value: "complete", title: "Complete", description: "100 biomarkers, twice a year." },
]

export function RadioGroupCards() {
  return (
    <RadioGroup defaultValue="complete" aria-label="Plan" className="w-full max-w-sm">
      {plans.map((plan) => (
        <label
          key={plan.value}
          className="flex items-start gap-3 rounded-lg border p-3 has-data-checked:border-primary"
        >
          <RadioGroupItem value={plan.value} className="mt-0.5" />
          <span className="grid gap-1">
            <span className="text-sm font-medium">{plan.title}</span>
            <span className="text-xs text-muted-foreground">{plan.description}</span>
          </span>
        </label>
      ))}
    </RadioGroup>
  )
}

Props

These are the props you set most often. Unlisted props pass through to the underlying element.

RadioGroup

Prop	Type	Default	Description
`defaultValue`	`any`	—	Selected value on first render.
`value`	`any`	—	Selected value when controlled.
`onValueChange`	`(value) => void`	—	Called when the selection changes.
`disabled`	`boolean`	`false`	Disables every option.
`name`	`string`	—	Field name for form submission.

RadioGroupItem

Prop	Type	Default	Description
`value`	`any`	—	Value of this option.
`disabled`	`boolean`	`false`	Disables this option.