logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Radio

Used to select a single state from multiple options.
Importimport { Radio } from "antd";
Sourcecomponents/radio
Docs
Edit this pageChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

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

PropertyDescriptionTypeDefault
autoFocusWhether get focus when component mountedbooleanfalse
checkedSpecifies whether the radio is selectedbooleanfalse
defaultCheckedSpecifies the initial state: whether or not the radio is selectedbooleanfalse
disabledDisable radiobooleanfalse
valueAccording to value for comparison, to determine whether the selectedany-

Radio.Group

Radio group can wrap a group of Radio.

PropertyDescriptionTypeDefaultVersion
buttonStyleThe style type of radio buttonoutline | solidoutline
defaultValueDefault selected valueany-
disabledDisable all radio buttonsbooleanfalse
nameThe name property of all input[type="radio"] children. If not set, it will fallback to a randomly generated namestring-
optionsSet children optionalstring[] | number[] | Array<CheckboxOptionType>-
optionTypeSet Radio optionTypedefault | buttondefault4.4.0
sizeThe size of radio button stylelarge | middle | small-
valueUsed for setting the currently selected valueany-
blockOption to fit RadioGroup width to its parent widthbooleanfalse5.21.0
onChangeThe callback function that is triggered when the state changesfunction(e:Event)-

CheckboxOptionType

PropertyDescriptionTypeDefaultVersion
labelThe text used to display as the Radio optionstring-4.4.0
valueThe value associated with the Radio optionstring | number | boolean-4.4.0
styleThe style to apply to the Radio optionReact.CSSProperties-4.4.0
classNameclassName of the Radio optionstring-5.25.0
disabledSpecifies whether the Radio option is disabledbooleanfalse4.4.0
titleAdds the Title attribute valuestring-4.4.0
idAdds the Radio Id attribute valuestring-4.4.0
onChangeTriggered when the value of the Radio Group changes(e: CheckboxChangeEvent) => void;-4.4.0
requiredSpecifies whether the Radio option is requiredbooleanfalse4.4.0

Methods

Radio

NameDescription
blur()Remove focus
focus()Get focus

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
buttonBgBackground color of Radio buttonstring#ffffff
buttonCheckedBgBackground color of checked Radio buttonstring#ffffff
buttonCheckedBgDisabledBackground color of checked and disabled Radio buttonstringrgba(0,0,0,0.15)
buttonCheckedColorDisabledColor of checked and disabled Radio button textstringrgba(0,0,0,0.25)
buttonColorColor of Radio button textstringrgba(0,0,0,0.88)
buttonPaddingInlineHorizontal padding of Radio buttonnumber15
buttonSolidCheckedActiveBgBackground color of checked solid Radio button text when activestring#0958d9
buttonSolidCheckedBgBackground color of checked solid Radio button textstring#1677ff
buttonSolidCheckedColorColor of checked solid Radio button textstring#fff
buttonSolidCheckedHoverBgBackground color of checked solid Radio button text when hoverstring#4096ff
dotColorDisabledColor of disabled Radio dotstringrgba(0,0,0,0.25)
dotSizeSize of Radio dotnumber8
radioSizeRadio sizenumber16
wrapperMarginInlineEndMargin right of Radio buttonnumber8
Global TokenHow to use?
Basic

The simplest use.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Radio Group

A group of radio components.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Block Radio.Group

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.21.0
radio style

The combination of radio button style.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Size

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
disabled

Radio unavailable.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Vertical Radio.Group

Vertical Radio.Group, with more radios.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Radio.Group group - optional

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Solid radio button

Solid radio button style.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code