Radio
Single selection among multiple options.
Basic usage
Radio should not have too many options. Otherwise, use the Select component instead.
Disabled
disabled attribute is used to disable the radio.
Radio button group
Suitable for choosing from some mutually exclusive options.
Button style
Radio with button styles.
With borders
Radio Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| model-value / v-model | binding value | string / number / boolean | — | — |
| label | the value of Radio | string / number / boolean | — | — |
| disabled | whether Radio is disabled | boolean | — | false |
| border | whether to add a border around Radio | boolean | — | false |
| size | size of the Radio | string | large / default /small | — |
| name | native 'name' attribute | string | — | — |
Radio Events
| Event Name | Description | Parameters |
|---|---|---|
| change | triggers when the bound value changes | the label value of the chosen radio |
Radio Slots
| Name | Description |
|---|---|
| — | customize default content |
Radio-group Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| model-value / v-model | binding value | string / number / boolean | — | — |
| size | the size of radio | string | large / small / small | default |
| disabled | whether the nesting radios are disabled | boolean | — | false |
| text-color | font color when button is active | string | — | #ffffff |
| fill | border and background color when button is active | string | — | #409EFF |
Radio-group Events
| Event Name | Description | Parameters |
|---|---|---|
| change | triggers when the bound value changes | the label value of the chosen radio |
Radio-group Slots
| Name | Description | Subtags |
|---|---|---|
| — | customize default content | Radio / Radio-button |
Radio-button Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| label | the value of radio | string / number | — | — |
| disabled | whether radio is disabled | boolean | — | false |
| name | native 'name' attribute | string | — | — |
Radio-button Slots
| Name | Description |
|---|---|
| — | customize default content |