mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-22 14:44:47 +08:00
0e9ac35e3c
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
* fix: input work with Upload * test: update snapshot
4.0 KiB
4.0 KiB
category | group | title | description | cover | coverDark | demo | ||
---|---|---|---|---|---|---|---|---|
Components | Data Entry | Radio | Used to select a single state from multiple options. | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mrPVRope68wAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xPfTSphsiA0AAAAAAAAAAAAADrJ8AQ/original |
|
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
Block Radio.Group
Radio.Group group - optional
radio style
Radio.Group with name
Size
Solid radio button
Badge style
Wireframe
Component Token
Upload Debug
API
Common props ref:Common props
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<CheckboxOptionType> | - | |
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 | - | |
block | Option to fit RadioGroup width to its parent width | boolean | false | 5.21.0 |
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 |
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 |