ComponentsPrimitives

Radio

Single selection control for choosing one option from a group

The Radio component provides single-selection controls built on Radix UI RadioGroup. Use RadioGroup to wrap Radio options, or use RadioGroupItem directly for fully custom layouts.

Import

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

Variants

Default

Standard review

Priority queue

Escalated approval

Code

<RadioGroup defaultValue="option-1">
  <Radio value="option-1" label="Standard review" />
  <Radio value="option-2" label="Priority queue" />
  <Radio value="option-3" label="Escalated approval" />
</RadioGroup>

Horizontal Layout

Compact

Balanced

Spacious

Code

<RadioGroup defaultValue="medium" className="flex flex-wrap gap-5">
  <Radio value="small" label="Compact" />
  <Radio value="medium" label="Balanced" />
  <Radio value="large" label="Spacious" size="lg" />
</RadioGroup>

States

Disabled Group

Archived queue

Closed queue

Code

<RadioGroup defaultValue="option-1" disabled>
  <Radio value="option-1" label="Archived queue" disabled />
  <Radio value="option-2" label="Closed queue" disabled />
</RadioGroup>

Disabled Individual Item

Available

Unavailable

Other

Code

<RadioGroup defaultValue="available">
  <Radio value="available" label="Available" />
  <Radio value="unavailable" label="Unavailable" disabled />
  <Radio value="other" label="Other" />
</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

Low-Level Usage

Use RadioGroupItem directly when you need a custom row structure. Keep visible labels separated with gap-3 or greater so the expanded hit target does not crowd text.

<RadioGroup defaultValue="custom">
  <div className="flex items-center gap-3">
    <RadioGroupItem value="custom" id="custom-radio" />
    <label htmlFor="custom-radio">Custom row</label>
  </div>
</RadioGroup>

Radio

Name	Type	Default	Description
`value*`	`string`	-	Unique value for this radio option
`label`	`React.ReactNode`	-	Visible label rendered with comfortable spacing from the control
`description`	`React.ReactNode`	-	Optional secondary copy linked through aria-describedby
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Control size for denser or more prominent option rows
`wrapperClassName`	`string`	-	Additional classes for the generated option row

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
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Control size for custom radio rows
`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)

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

Checkbox

Boolean selection control built on Radix UI

Select

Dropdown selection component built on Radix UI

Radio

On this page