RadioGroup

The radioGroup component allows users to select an option from a set of radio components.

Foo

Bar

Baz

Expand code


const options = [
  {label: 'Foo', value: 'foo'},
  {label: 'Bar', value: 'bar'},
  {label: 'Baz', value: 'baz'}
];
 
<RadioGroup 
  options={options}
  selected={selectedValue}
  onChange={(e) => {setSelectedValue(e.target.value)}}
/>

Direction

The radio options can be presented in either a horizontal or vertical layout (default).

Foo

Bar

Baz

Foo

Bar

Baz

Expand code


const options = [
  {label: 'Foo', value: 'foo'},
  {label: 'Bar', value: 'bar'},
  {label: 'Baz', value: 'baz'}
];
 
<RadioGroup
  name={'row'}
  direction={'row'}
  options={options}
  selected={rowValue}
  onChange={(e) => {setRowValue(e.target.value)}}
/>
 
<RadioGroup
  name={'column'}
  direction={'column'}
  options={options}
  selected={colValue}
  onChange={(e) => {setColValue(e.target.value)}}
/>

Disabled state

Individual options can be deactivated or all at once.

Expand code


const options = [
{label: 'Foo', value: 'foo'},
{label: 'Bar', value: 'bar'},
{label: 'Baz', value: 'baz', disabled: true}
];
 
<RadioGroup
  options={options}
  selected={selectedValue}
  onChange={(e) => {setSelectedValue(e.target.value)}}
/>
 
<RadioGroup options={options} disabled/>

The disabled state of the grouped radio component will take precedence over the individual disabled states.

Color

You can customize the checkmark color using any value supported by the background-color property in CSS, such as red, #11aa33, or rgb(0,0,0).

Expand code


const options = [
{label: 'Foo', value: 'foo'},
{label: 'Bar', value: 'bar'},
{label: 'Baz', value: 'baz'}
];
 
<RadioGroup
  color={'#11aa33'}
  options={options}
  selected={selectedValue}
  onChange={(e) => {setSelectedValue(e.target.value)}}
/>
 
<RadioGroup
  color={'#11aa33'}
  options={options}
  selected={'foo'}
  disabled
/>

The color of a disabled radio cannot be overwritten.

Props

RadioGroup

Name	Type	Default	Description
color	`string`	-	Color of the checkmark
dark	`boolean`	false	Use the darkmode style
direction	`row` \| `column`	column	Direction of the options
disabled	`boolean`	false	Disables the component
name	`string`	-	Sets the name attribute for every radio option
onChange	`ChangeEventHandler<HTMLInputElement>`	-	On change handler
options	`RadioOption[]`	-	Radio options
selected	`string`	-	Selected radio option

RadioOption

Name	Type	Default	Description
disabled	`boolean`	false	Disables the option
id	`string`	-	Id for the radio input
label	`node`	-	Label of the option
title	`string`	-	Title attribute of the radio input
value	`string` \| `number`	-	Value of the radio input

Last updated on December 15, 2025

Radio Dialog