- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Radio.
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 | 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) | - |
| 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.
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.
Radio unavailable.
Vertical Radio.Group, with more radios.
The combination of radio button style.
There are three sizes available: large, medium, and small. It can coordinate with input box.
