Ant Design

⌘ K

6.4.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 LLMs.md

contributors

Mentions Rate

Ant Design

⌘ K

6.4.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 LLMs.md

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' },
    ]}
  />
);

// Not 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
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` \| `medium` \| `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	8
radioSize	Radio size	number	16
wrapperMarginInlineEnd	Margin right of Radio button	number	8

Global TokenHow to use?

Token Name	Description	Type	Default Value
colorBgContainer	Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`.	string	#ffffff
colorBgContainerDisabled	Control the background color of container in disabled state.	string	rgba(0,0,0,0.04)
colorBorder	Default border color, used to separate different elements, such as: form separator, card separator, etc.	string	#d9d9d9
colorPrimary	Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.	string	#1677ff
colorPrimaryActive	Dark active state under the main color gradient.	string	#0958d9
colorPrimaryBorder	The stroke color under the main color gradient, used on the stroke of components such as Slider.	string	#91caff
colorPrimaryHover	Hover state under the main color gradient.	string	#4096ff
colorText	Default text color which comply with W3C standards, and this color is also the darkest neutral color.	string	rgba(0,0,0,0.88)
colorTextDisabled	Control the color of text in disabled state.	string	rgba(0,0,0,0.25)
borderRadius	Border radius of base components	number	6
borderRadiusLG	LG size border radius, used in some large border radius components, such as Card, Modal and other components.	number	8
borderRadiusSM	SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size	number	4
controlHeight	The height of the basic controls such as buttons and input boxes in Ant Design	number	32
controlHeightLG	LG component height	number	40
controlHeightSM	SM component height	number	24
controlOutline	Control the outline color of input component.	string	rgba(5,145,255,0.1)
controlOutlineWidth	Control the outline width of input component.	number	2
fontFamily	The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	The most widely used font size in the design system, from which the text gradient will be derived.	number	14
fontSizeLG	Large font size	number	16
lineHeight	Line height of text.	number	1.5714285714285714
lineType	Border style of base components	string	solid
lineWidth	Border width of base components	number	1
lineWidthFocus	Control the width of the line when the component is in focus state.	number	3
marginXS	Control the margin of an element, with a small size.	number	8
motionDurationMid	Motion speed, medium speed. Used for medium element animation interaction.	string	0.2s
motionDurationSlow	Motion speed, slow speed. Used for large element animation interaction.	string	0.3s
motionEaseInOutCirc	Preset motion curve.	string	cubic-bezier(0.78, 0.14, 0.15, 0.86)
paddingXS	Control the extra small padding of the element.	number	8

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' },
    ]}
  />
);

// Not 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
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` \| `medium` \| `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	8
radioSize	Radio size	number	16
wrapperMarginInlineEnd	Margin right of Radio button	number	8

Global TokenHow to use?

Token Name	Description	Type	Default Value
colorBgContainer	Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`.	string	#ffffff
colorBgContainerDisabled	Control the background color of container in disabled state.	string	rgba(0,0,0,0.04)
colorBorder	Default border color, used to separate different elements, such as: form separator, card separator, etc.	string	#d9d9d9
colorPrimary	Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.	string	#1677ff
colorPrimaryActive	Dark active state under the main color gradient.	string	#0958d9
colorPrimaryBorder	The stroke color under the main color gradient, used on the stroke of components such as Slider.	string	#91caff
colorPrimaryHover	Hover state under the main color gradient.	string	#4096ff
colorText	Default text color which comply with W3C standards, and this color is also the darkest neutral color.	string	rgba(0,0,0,0.88)
colorTextDisabled	Control the color of text in disabled state.	string	rgba(0,0,0,0.25)
borderRadius	Border radius of base components	number	6
borderRadiusLG	LG size border radius, used in some large border radius components, such as Card, Modal and other components.	number	8
borderRadiusSM	SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size	number	4
controlHeight	The height of the basic controls such as buttons and input boxes in Ant Design	number	32
controlHeightLG	LG component height	number	40
controlHeightSM	SM component height	number	24
controlOutline	Control the outline color of input component.	string	rgba(5,145,255,0.1)
controlOutlineWidth	Control the outline width of input component.	number	2
fontFamily	The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	The most widely used font size in the design system, from which the text gradient will be derived.	number	14
fontSizeLG	Large font size	number	16
lineHeight	Line height of text.	number	1.5714285714285714
lineType	Border style of base components	string	solid
lineWidth	Border width of base components	number	1
lineWidthFocus	Control the width of the line when the component is in focus state.	number	3
marginXS	Control the margin of an element, with a small size.	number	8
motionDurationMid	Motion speed, medium speed. Used for medium element animation interaction.	string	0.2s
motionDurationSlow	Motion speed, slow speed. Used for large element animation interaction.	string	0.3s
motionEaseInOutCirc	Preset motion curve.	string	cubic-bezier(0.78, 0.14, 0.15, 0.86)
paddingXS	Control the extra small padding of the element.	number	8

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

Object stylesFunction classNames

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