Radio

Radio lets users pick a single option from a short, mutually exclusive set.

Billing plan

Choose the plan applied to this workspace.

StarterFor solo projectsTeamShared workspacesBusinessSSO and audit logs

import { useState } from 'react';
import Radio from '@/components/ui/radio';

const plans = [

Installation

Add this component with the NateUI CLI.

npx @nateui/cli@latest add Radio

pnpm dlx @nateui/cli@latest add Radio

yarn dlx @nateui/cli@latest add Radio

Examples

Basic

import Radio from '@/components/ui/radio';

export default function BasicDemo() {
  return (

Group

import { useState } from 'react';
import Radio from '@/components/ui/radio';

const speeds = [

Vertical

import { useState } from 'react';
import Radio from '@/components/ui/radio';

export default function VerticalDemo() {

States

import Radio from '@/components/ui/radio';

export default function StatesDemo() {
  return (

Custom Color

import Radio from '@/components/ui/radio';

export default function CustomColorDemo() {
  return (

Controlled

import { useState } from 'react';
import Radio from '@/components/ui/radio';

const levels = [

API

Radio exposes a single radio input and a compound Radio.Group for single-selection sets.

Radio

Radio accepts the props below plus native props for the underlying input.

Prop	Description	Type	Default
`checked`	Controls the selected state for standalone usage.	`boolean`	-
`defaultChecked`	Initial selected state for uncontrolled usage.	`boolean`	-
`value`	Value used by `Radio.Group` to match the selected option and passed through to the input.	`RadioValue`	-
`radioClass`	Class names applied to the radio control, used for custom color or local styling.	`string`	-
`children`	Label content rendered beside the radio control.	`ReactNode`	-
`className`	Class names applied to the root label.	`string`	-
`disabled`	Prevents interaction and applies disabled styling. Inherited from the group when set there.	`boolean`	Group `disabled`
`readOnly`	Prevents the radio from changing state on interaction.	`boolean`	-
`name`	Name passed to the input, or inherited from the group.	`string`	Group `name`
`onChange`	Called with this radio value and the input change event when it becomes selected.	`RadioChangeHandler`	-
`labelRef`	Ref forwarded to the root label element.	`Ref<HTMLLabelElement>`	-
`ref`	Ref forwarded to the underlying radio input.	`Ref<HTMLInputElement>`	-
`...nativeInputProps`	Native props for the underlying radio input.	`NativeRadioInputProps`	-

Radio.Group

Radio.Group accepts the props below plus native props for the root div.

Prop	Description	Type	Default
`value`	Selected value shared by the group; the matching radio is selected.	`RadioValue`	-
`onChange`	Called with the next selected value and the source change event.	`RadioGroupChangeHandler`	-
`radioClass`	Class names applied to every radio control in the group.	`string`	-
`disabled`	Disables every radio in the group.	`boolean`	-
`name`	Name shared by radio inputs inside the group.	`string`	-
`vertical`	Stacks group items vertically.	`boolean`	`false`
`children`	Radio items rendered inside the group.	`ReactNode`	-
`className`	Class names applied to the group root.	`string`	-
`ref`	Ref forwarded to the group root.	`Ref<HTMLDivElement>`	-
`...nativeDivProps`	Native props for the group root `div`.	`NativeRadioGroupDivProps`	-

Types

type RadioValue = string;
type RadioChangeHandler = (
  value: RadioValue,
  event: ChangeEvent<HTMLInputElement>,
) => void;
type RadioGroupChangeHandler = (
  value: RadioValue,
  event: ChangeEvent<HTMLInputElement>,
) => void;
type NativeRadioInputProps = ComponentProps<'input'>;
type NativeRadioGroupDivProps = ComponentProps<'div'>;