logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.26.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
When To Use
Examples
Basic
disabled
Radio Group
Vertical Radio.Group
Block Radio.Group
Radio.Group group - optional
radio style
Radio.Group with name
Size
Solid radio button
API
Radio/Radio.Button
Radio.Group
CheckboxOptionType
Methods
Radio
Design Token

Radio

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

    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

    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
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Radio Group

    A group of radio components.

    CodeSandbox Icon
    codeblock
    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
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    5.21.0
    radio style

    The combination of radio button style.

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

    Radio unavailable.

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

    Vertical Radio.Group, with more radios.

    CodeSandbox Icon
    codeblock
    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
    codeblock
    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
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Solid radio button

    Solid radio button style.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code