Ant Design

⌘ K

5.23.3

Radio

Used to select a single state from multiple options.

Importimport{ Radio }from"antd";

Sourcecomponents/radio

Docs

Edit this page Changelog

Ant Design

⌘ K

5.23.3

Radio

Used to select a single state from multiple options.

Importimport{ Radio }from"antd";

Sourcecomponents/radio

Docs

Edit this page Changelog

When To Use

Used to select a single state from multiple options.
The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn't be too many of them.

// When use Radio.Group, recommended ✅
return (
  <Radio.Group
    value={value}
    options={[
      { value: 1, label: "A" },
      { value: 2, label: "B"},
      { value: 3, label: "C" },
    ]}
  />
);

// No recommended 🙅🏻‍♀️
return (
  <Radio.Group value={value}>
    <Radio value={1}>A</Radio>
    <Radio value={2}>B</Radio>
    <Radio value={3}>C</Radio>
  </Radio.Group>
);

Examples

API

Common props ref：Common props

Radio/Radio.Button

Property	Description	Type	Default
autoFocus	Whether get focus when component mounted	boolean	false
checked	Specifies whether the radio is selected	boolean	false
defaultChecked	Specifies the initial state: whether or not the radio is selected	boolean	false
disabled	Disable radio	boolean	false
value	According to value for comparison, to determine whether the selected	any	-

RadioGroup

Radio group can wrap a group of Radio。

Property	Description	Type	Default	Version
buttonStyle	The style type of radio button	`outline` \| `solid`	`outline`
defaultValue	Default selected value	any	-
disabled	Disable all radio buttons	boolean	false
name	The `name` property of all `input[type="radio"]` children. If not set, it will fallback to a randomly generated name	string	-
options	Set children optional	string[] \| number[] \| Array<CheckboxOptionType>	-
optionType	Set Radio optionType	`default` \| `button`	`default`	4.4.0
size	The size of radio button style	`large` \| `middle` \| `small`	-
value	Used for setting the currently selected value	any	-
block	Option to fit RadioGroup width to its parent width	boolean	false	5.21.0
onChange	The callback function that is triggered when the state changes	function(e:Event)	-

CheckboxOptionType

Property	Description	Type	Default	Version
label	The text used to display as the Radio option	`string`	-	4.4.0
value	The value associated with the Radio option	`string` \| `number` \| `boolean`	-	4.4.0
style	The style to apply to the Radio option	`React.CSSProperties`	-	4.4.0
disabled	Specifies whether the Radio option is disabled	`boolean`	`false`	4.4.0
title	Adds the Title attribute value	`string`	-	4.4.0
id	Adds the Radio Id attribute value	`string`	-	4.4.0
onChange	Triggered when the value of the Radio Group changes	`(e: CheckboxChangeEvent) => void;`	-	4.4.0
required	Specifies whether the Radio option is required	`boolean`	`false`	4.4.0

Methods

Radio

Name	Description
blur()	Remove focus
focus()	Get focus

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
buttonBg	Background color of Radio button	string	#ffffff
buttonCheckedBg	Background color of checked Radio button	string	#ffffff
buttonCheckedBgDisabled	Background color of checked and disabled Radio button	string	rgba(0,0,0,0.15)
buttonCheckedColorDisabled	Color of checked and disabled Radio button text	string	rgba(0,0,0,0.25)
buttonColor	Color of Radio button text	string	rgba(0,0,0,0.88)
buttonPaddingInline	Horizontal padding of Radio button	number	15
buttonSolidCheckedActiveBg	Background color of checked solid Radio button text when active	string	#0958d9
buttonSolidCheckedBg	Background color of checked solid Radio button text	string	#1677ff
buttonSolidCheckedColor	Color of checked solid Radio button text	string	#fff
buttonSolidCheckedHoverBg	Background color of checked solid Radio button text when hover	string	#4096ff
dotColorDisabled	Color of disabled Radio dot	string	rgba(0,0,0,0.25)
dotSize	Size of Radio dot	number	8
radioSize	Radio size	number	16
wrapperMarginInlineEnd	Margin right of Radio button	number	8

Global TokenHow to use?

When To Use

Used to select a single state from multiple options.
The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn't be too many of them.

// When use Radio.Group, recommended ✅
return (
  <Radio.Group
    value={value}
    options={[
      { value: 1, label: "A" },
      { value: 2, label: "B"},
      { value: 3, label: "C" },
    ]}
  />
);

// No recommended 🙅🏻‍♀️
return (
  <Radio.Group value={value}>
    <Radio value={1}>A</Radio>
    <Radio value={2}>B</Radio>
    <Radio value={3}>C</Radio>
  </Radio.Group>
);

Examples

API

Common props ref：Common props

Radio/Radio.Button

Property	Description	Type	Default
autoFocus	Whether get focus when component mounted	boolean	false
checked	Specifies whether the radio is selected	boolean	false
defaultChecked	Specifies the initial state: whether or not the radio is selected	boolean	false
disabled	Disable radio	boolean	false
value	According to value for comparison, to determine whether the selected	any	-

RadioGroup

Radio group can wrap a group of Radio。

Property	Description	Type	Default	Version
buttonStyle	The style type of radio button	`outline` \| `solid`	`outline`
defaultValue	Default selected value	any	-
disabled	Disable all radio buttons	boolean	false
name	The `name` property of all `input[type="radio"]` children. If not set, it will fallback to a randomly generated name	string	-
options	Set children optional	string[] \| number[] \| Array<CheckboxOptionType>	-
optionType	Set Radio optionType	`default` \| `button`	`default`	4.4.0
size	The size of radio button style	`large` \| `middle` \| `small`	-
value	Used for setting the currently selected value	any	-
block	Option to fit RadioGroup width to its parent width	boolean	false	5.21.0
onChange	The callback function that is triggered when the state changes	function(e:Event)	-

CheckboxOptionType

Property	Description	Type	Default	Version
label	The text used to display as the Radio option	`string`	-	4.4.0
value	The value associated with the Radio option	`string` \| `number` \| `boolean`	-	4.4.0
style	The style to apply to the Radio option	`React.CSSProperties`	-	4.4.0
disabled	Specifies whether the Radio option is disabled	`boolean`	`false`	4.4.0
title	Adds the Title attribute value	`string`	-	4.4.0
id	Adds the Radio Id attribute value	`string`	-	4.4.0
onChange	Triggered when the value of the Radio Group changes	`(e: CheckboxChangeEvent) => void;`	-	4.4.0
required	Specifies whether the Radio option is required	`boolean`	`false`	4.4.0

Methods

Radio

Name	Description
blur()	Remove focus
focus()	Get focus

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
buttonBg	Background color of Radio button	string	#ffffff
buttonCheckedBg	Background color of checked Radio button	string	#ffffff
buttonCheckedBgDisabled	Background color of checked and disabled Radio button	string	rgba(0,0,0,0.15)
buttonCheckedColorDisabled	Color of checked and disabled Radio button text	string	rgba(0,0,0,0.25)
buttonColor	Color of Radio button text	string	rgba(0,0,0,0.88)
buttonPaddingInline	Horizontal padding of Radio button	number	15
buttonSolidCheckedActiveBg	Background color of checked solid Radio button text when active	string	#0958d9
buttonSolidCheckedBg	Background color of checked solid Radio button text	string	#1677ff
buttonSolidCheckedColor	Color of checked solid Radio button text	string	#fff
buttonSolidCheckedHoverBg	Background color of checked solid Radio button text when hover	string	#4096ff
dotColorDisabled	Color of disabled Radio dot	string	rgba(0,0,0,0.25)
dotSize	Size of Radio dot	number	8
radioSize	Radio size	number	16
wrapperMarginInlineEnd	Margin right of Radio button	number	8

Global TokenHow to use?

Basic

The simplest use.

Radio Group

A group of radio components.

Block Radio.Group

The block property will make a Radio.Group fit to its parent width.

5.21.0

radio style

The combination of radio button style.

Size

There are three sizes available: large, medium, and small. It can coordinate with input box.

disabled

Radio unavailable.

Vertical Radio.Group

Vertical Radio.Group, with more radios.

Radio.Group group - optional

Render radios by configuring options. Radio type can also be set through the optionType parameter.

Radio.Group with name

Passing the name property to all input[type="radio"] that are in the same Radio.Group. It is usually used to let the browser see your Radio.Group as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same Radio.Group.

Solid radio button

Solid radio button style.

Basic

The simplest use.

Radio Group

A group of radio components.

Block Radio.Group

The block property will make a Radio.Group fit to its parent width.

5.21.0

radio style

The combination of radio button style.

Size

There are three sizes available: large, medium, and small. It can coordinate with input box.

disabled

Radio unavailable.

Vertical Radio.Group

Vertical Radio.Group, with more radios.

Radio.Group group - optional

Render radios by configuring options. Radio type can also be set through the optionType parameter.

Radio.Group with name

Passing the name property to all input[type="radio"] that are in the same Radio.Group. It is usually used to let the browser see your Radio.Group as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same Radio.Group.

Solid radio button

Solid radio button style.

Radio

LineChart

DotChart

BarChart

PieChart

DisabledDisabled

Option AOption BOption CMore...

ApplePearOrange

ABCD