FORMS

RadioGroup

Mutually-exclusive radio group built on Radix RadioGroup. Wraps each option in a Memphis-bordered button with a filled inner dot when selected. Use it whenever the user must pick exactly one of three or more options; for two-option toggles reach for SegmentedControl or Switch.

Import

import { RadioGroup, RadioGroupItem, Label } from 'damo-ui'

Basic usage

1<RadioGroup defaultValue="medium">
2  <div className="flex items-center gap-2">
3    <RadioGroupItem value="small" id="size-s" />
4    <Label htmlFor="size-s">Small</Label>
5  </div>
6  <div className="flex items-center gap-2">
7    <RadioGroupItem value="medium" id="size-m" />
8    <Label htmlFor="size-m">Medium</Label>
9  </div>
10  <div className="flex items-center gap-2">
11    <RadioGroupItem value="large" id="size-l" />
12    <Label htmlFor="size-l">Large</Label>
13  </div>
14</RadioGroup>

Props

RadioGroup props (props on RadioGroupItem follow the same Radix shape)
PropTypeDefaultDescription
valuestring—Controlled selected value. Pair with onValueChange.
defaultValuestring—Uncontrolled initial selected value.
onValueChange(value: string) => void—Fires whenever the selection changes.
namestring—Name attribute for native form submission.
disabledboolean—Disables every item in the group.
requiredboolean—Marks the group as required for native form submission.

Accessibility

  • Radix wires role="radiogroup" on the root and role="radio" on each item with proper aria-checked.
  • Pair each RadioGroupItem with a Label wired via htmlFor so the click area extends to the label.
  • Keyboard: Tab moves focus to the currently selected item (roving tabindex); arrow keys cycle items and change the selection; Tab again moves focus out of the group.
← CheckboxSwitch →