Core

Glass

Brutal

Humanist

Radio

Radio buttons are used for selecting a single option from a set of mutually exclusive choices.

Radio Container Playground

Preview

Code

Basic Plan$0/month - For personal use

Pro Plan$29/month - For small teams

EnterpriseCustom - For large organizations

Controls

Size:

Small

Medium

Large

Supporting Text:

Disabled:

Radio Label Playground

Preview

Code

All notificationsGet all updates and alerts

Mentions onlyOnly when you are tagged

No notificationsMute all sounds and alerts

Controls

Size:

Small

Medium

Large

Supporting Text:

Disabled:

Radio Playground

Preview

Code

Controls

Size:

Small

Medium

Large

Disabled:

Installation

You can add the radio component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install @react-aria/focus @react-aria/interactions @react-aria/utils

Copy and paste the following code into your project.

Radio.tsx

RadioContainer.tsx

RadioLabel.tsx

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

import { Radio } from '@versaui/ui/components/Radio';
// Basic radio
<Radio />
// Controlled radio
<Radio selected={isSelected} onChange={setIsSelected} />
// Different sizes
<Radio size="small" />
<Radio size="medium" />
<Radio size="large" />
// Disabled radio
<Radio disabled />
// Selected and disabled
<Radio selected disabled />

Accessibility

Uses native <input type="radio"> for full accessibility
Proper aria-checked and aria-disabled attributes
Group association via name prop
Keyboard navigation within radio groups

RadioContainer Props

Prop	Type	Default	Description
`title`	`string`	`-`	Container title text.
`supportingText`	`string`	`-`	Description text below title.
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Radio button size.
`selected`	`boolean`	`false`	Controlled selected state.
`disabled`	`boolean`	`false`	Prevents interaction.
`onChange`	`(selected: boolean) => void`	`-`	Called when selected state changes.

RadioLabel Props

Prop	Type	Default	Description
`label`	`string`	`-`	Label text next to radio.
`supportingText`	`string`	`-`	Helper text below the label.
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Radio button size.
`selected`	`boolean`	`false`	Controlled selected state.
`disabled`	`boolean`	`false`	Prevents interaction.
`onChange`	`(selected: boolean) => void`	`-`	Called when selected state changes.

Radio Props

Prop	Type	Default	Description
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Radio button size.
`selected`	`boolean`	`false`	Controlled selected state.
`disabled`	`boolean`	`false`	Prevents interaction.
`onChange`	`(selected: boolean) => void`	`-`	Called when selected state changes.
`name`	`string`	`-`	Group name for radio button association.
`value`	`string`	`-`	Value for form submission.

Progress Bar

Linear progress indicator for showing completion status

Search Bar

Search input with keyboard shortcuts, clear button, and multiple sizes

Radio

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

On this page