Radio
Radio
Used to select a single state from multiple options.
Importimport { Radio } from "antd"; |
Sourcecomponents/radio |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Importimport { Radio } from "antd"; |
Sourcecomponents/radio |
// When use Radio.Group, recommended ✅return (<Radio.Groupvalue={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>);
Common props ref：Common props
| 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 | - |
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. 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 |
| 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) | - |
| 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 |
| Name | Description |
|---|---|
| blur() | Remove focus |
| focus() | Get focus |
| 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 |
The simplest use.
A group of radio components.
The block property will make a Radio.Group fit to its parent width.
The combination of radio button style.
There are three sizes available: large, medium, and small. It can coordinate with input box.
Radio unavailable.
Vertical Radio.Group, with more radios.
Render radios by configuring options. Radio type can also be set through the optionType parameter.
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 style.
