Search
Radio
A radio input allows people to select only one option from a number of choices. Radio is generally displayed in a radio group.
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.
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.
Basic
The default way to present a single option from a list.
In most situations where you want to present a list of mutually exclusive options, you will want to use a radio group.
In most situations where you want to present a list of mutually exclusive options, you will want to use a radio group.
Radio Group
A group of radio components.
Vertical Radio.Group
Vertical Radio.Group, with more radios.
Segmented control
A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button. Like buttons, segments can contain text or images.
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
| Property | Description | Type | Default |
|---|---|---|---|
defaultValue | Default selected value | any | - |
disabled | Disable all radio buttons | boolean | - |
name | The name property of all input[type="radio"] children | string | - |
options | Set children optional | string[] | Array<{ label: string value: string disabled?: boolean }> | - |
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) | - |
optionType | Set Radio optionType | default | button | default |
buttonStyle | The style type of radio button | outline | solid | outline |
Methods
Radio
| Property | Description | Type | Default |
|---|---|---|---|
blur() | Remove focus | - | |
focus() | Get focus | - |