Ant Design

⌘ K

6.0.0-alpha.3

Radio

Used to select a single state from multiple options.

Importimport { Radio } from "antd";

GitHub

components/radio Issue Open issues

Docs

Edit this page

contributors

Mentions Rate

Ant Design

⌘ K

6.0.0-alpha.3

Radio

Used to select a single state from multiple options.

Importimport { Radio } from "antd";

GitHub

components/radio Issue Open issues

Docs

Edit this page

contributors

Mentions Rate

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.

tsx

// 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	Version
autoFocus	Whether get focus when component mounted	boolean	false
checked	Specifies whether the radio is selected	boolean	false
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-	6.0.0
defaultChecked	Specifies the initial state: whether or not the radio is selected	boolean	false
disabled	Disable radio	boolean	false
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-	6.0.0
value	According to value for comparison, to determine whether the selected	any	-

Radio.Group

Radio group can wrap a group of Radio.

Property	Description	Type	Default	Version
block	Option to fit RadioGroup width to its parent width	boolean	false	5.21.0
buttonStyle	The style type of radio button	`outline` \| `solid`	`outline`
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-	6.0.0
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
orientation	Orientation	`horizontal` \| `vertical`	`horizontal`
size	The size of radio button style	`large` \| `middle` \| `small`	-
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-	6.0.0
value	Used for setting the currently selected value	any	-
vertical	If true, the Radio group will be vertical. Simultaneously existing with `orientation`, `orientation` takes priority	boolean	false
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
className	className of the Radio option	`string`	-	5.25.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

Semantic DOM

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	6
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.

tsx

// 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

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.

Custom semantic dom styling

You can customize the semantic dom style of radio by passing objects/functions through classNames and styles.

6.0.0

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.

API

Common props ref：Common props

Radio/Radio.Button

Property	Description	Type	Default	Version
autoFocus	Whether get focus when component mounted	boolean	false
checked	Specifies whether the radio is selected	boolean	false
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-	6.0.0
defaultChecked	Specifies the initial state: whether or not the radio is selected	boolean	false
disabled	Disable radio	boolean	false
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-	6.0.0
value	According to value for comparison, to determine whether the selected	any	-

Radio.Group

Radio group can wrap a group of Radio.

Property	Description	Type	Default	Version
block	Option to fit RadioGroup width to its parent width	boolean	false	5.21.0
buttonStyle	The style type of radio button	`outline` \| `solid`	`outline`
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-	6.0.0
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
orientation	Orientation	`horizontal` \| `vertical`	`horizontal`
size	The size of radio button style	`large` \| `middle` \| `small`	-
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-	6.0.0
value	Used for setting the currently selected value	any	-
vertical	If true, the Radio group will be vertical. Simultaneously existing with `orientation`, `orientation` takes priority	boolean	false
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
className	className of the Radio option	`string`	-	5.25.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

Semantic DOM

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	6
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.

Custom semantic dom styling

You can customize the semantic dom style of radio by passing objects/functions through classNames and styles.

6.0.0

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

ObjectFunction

DisabledDisabled

Option AOption BOption CMore...

ApplePearOrange

ABCD

Radio

root
6.0.0
Root element with layout styles, cursor styles, disabled text color and other basic container styles
icon
6.0.0
Icon element with border radius, transition animations, border styles, hover states, focus states and other interactive styles
label
6.0.0
Label element with padding, text color, disabled states, alignment and other text styles

Radio

Radio

When To Use

Examples

API

Radio/Radio.Button

Radio.Group

CheckboxOptionType

Methods

Radio

Semantic DOM

Design Token

When To Use

Examples

API

Radio/Radio.Button

Radio.Group

CheckboxOptionType

Methods

Radio

Semantic DOM

Design Token

root

icon

label