Radio Group

Options

Option A

Option B

Option C

Disabled

Option A

Option B

Installation

npx visor add radio-group

This copies two files into your project:

components/ui/radio-group/radio-group.tsx — the component
components/ui/radio-group/radio-group.module.css — the styles

Usage

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

<RadioGroup defaultValue="a">
  <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
    <RadioGroupItem value="a" id="a" />
    <Label htmlFor="a">Option A</Label>
  </div>
  <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
    <RadioGroupItem value="b" id="b" />
    <Label htmlFor="b">Option B</Label>
  </div>
</RadioGroup>

API Reference

RadioGroupProps

Prop	Type	Default	Description
`value`	`string`	—	Controlled value of the selected radio item.
`defaultValue`	`string`	—	Default selected value for uncontrolled usage.
`onValueChange`	`(value: string) => void`	—	Callback when the selected value changes.
`disabled`	`boolean`	`false`	Disables all radio items in the group.

Sub-components

Component	Element	Purpose
`RadioGroup`	`<div>`	Root container with `role="radiogroup"` managing selection state
`RadioGroupItem`	`<button>`	Individual radio option with `role="radio"` and circle indicator

Accessibility

Built on @radix-ui/react-radio-group with full WAI-ARIA radio group semantics
RadioGroup renders with role="radiogroup"; each RadioGroupItem renders with role="radio"
Wrap the group in a <Fieldset> with a <FieldsetLegend> to give the group an accessible name
Each item should have an associated <Label> via matching htmlFor/id
Keyboard: Arrow keys move selection within the group; Tab moves focus to/from the group

Radio Group

On this page