ant-design/components/radio/index.en-US.md
MadCcc e7edfa42d7
docs: update overview img (#38946)
* docs: update overview img

* chore: code clean

* chore: code clean

* chore: update

* chore: code clean
2022-11-30 20:14:41 +08:00

2.5 KiB

category group title cover demo
Components Data Entry Radio https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M-YKTJnWM2kAAAAAAAAAAAAADrJ8AQ/original
cols
2

Radio.

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.

Examples

Basic disabled Radio Group Vertical Radio.Group Radio.Group group - optional radio style Radio.Group with name Size Solid radio button 测试 Badge 的样式

API

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 string -
options Set children optional string[] | number[] | Array<{ label: ReactNode; value: string; disabled?: boolean; }> -
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 -
onChange The callback function that is triggered when the state changes function(e:Event) -

Methods

Radio

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