Radio

The Radio component provides single-selection controls built on Radix UI RadioGroup. Use RadioGroup to wrap a set of RadioGroupItem elements, ensuring only one option can be selected at a time.

Import

import { RadioGroup, RadioGroupItem } from '@nim-ui/components';

Variants

Default

Default Radio Group

Option 1

Option 2

Option 3

View Code

<RadioGroup defaultValue="option-1">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-1" id="r1" />
    <label htmlFor="r1">Option 1</label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-2" id="r2" />
    <label htmlFor="r2">Option 2</label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-3" id="r3" />
    <label htmlFor="r3">Option 3</label>
  </div>
</RadioGroup>

Horizontal Layout

Horizontal Radio Group

Small

Medium

Large

View Code

<RadioGroup defaultValue="small" className="flex gap-4">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="small" id="size-sm" />
    <label htmlFor="size-sm">Small</label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="medium" id="size-md" />
    <label htmlFor="size-md">Medium</label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="large" id="size-lg" />
    <label htmlFor="size-lg">Large</label>
  </div>
</RadioGroup>

States

Disabled Group

Disabled Radio Group

Option 1

Option 2

View Code

<RadioGroup defaultValue="option-1" disabled>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-1" id="d1" />
    <label htmlFor="d1">Option 1</label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-2" id="d2" />
    <label htmlFor="d2">Option 2</label>
  </div>
</RadioGroup>

Disabled Individual Item

Disabled Individual Radio Item

Available

Unavailable (disabled)

Other

View Code

<RadioGroup defaultValue="available">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="available" id="a1" />
    <label htmlFor="a1">Available</label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="unavailable" id="a2" disabled />
    <label htmlFor="a2">Unavailable (disabled)</label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="other" id="a3" />
    <label htmlFor="a3">Other</label>
  </div>
</RadioGroup>

Props

RadioGroup

Name	Type	Default	Description
value	string	-	Controlled value of the selected radio item
onValueChange	(value: string) => void	-	Callback fired when the selected value changes
defaultValue	string	-	Initial selected value for uncontrolled usage
disabled	boolean	false	Whether all radio items in the group are disabled
className	string	-	Additional CSS classes to apply to the group container

RadioGroupItem

Name	Type	Default	Description
value *	string	-	Unique value for this radio item
disabled	boolean	false	Whether this individual radio item is disabled
id	string	-	HTML id attribute, used to associate with a label
className	string	-	Additional CSS classes to apply

Accessibility

The RadioGroup component is built on Radix UI and follows WAI-ARIA best practices:

• Uses role="radiogroup" on the container
• Each item uses role="radio" with proper aria-checked state
• Supports roving tabindex for keyboard navigation within the group
• Focus visible states for keyboard users
• Disabled state properly communicated to assistive technology

Keyboard Support

Key	Action
Tab	Moves focus to the radio group (or the selected item)
Arrow Down / Arrow Right	Moves focus and selection to the next item
Arrow Up / Arrow Left	Moves focus and selection to the previous item
Space	Selects the focused item (if not already selected)

Related Components

• Checkbox - Multiple selection control
• Select - Dropdown single selection
• Switch - Toggle switch for on/off states
• Button - Interactive button for actions