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 API
Radio Attributes
| Name | Description | Type | 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 | enum | — |
| name | native name attribute | string | — |
Radio Events
| Name | Description | Type |
|---|---|---|
| change | triggers when the bound value changes | Function |
Radio Slots
| Name | Description |
|---|---|
| default | customize default content |
RadioGroup API
RadioGroup Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| model-value / v-model | binding value | string / number / boolean | — |
| size | the size of radio buttons or bordered radios | string | 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 |
| validate-event | whether to trigger form validation | boolean | true |
| label a11y | same as aria-label in RadioGroup | string | — |
| name | native name attribute | string | — |
| id | native id attribute | string | — |
RadioGroup Events
| Name | Description | Type |
|---|---|---|
| change | triggers when the bound value changes | Function |
RadioGroup Slots
| Name | Description | Subtags |
|---|---|---|
| default | customize default content | Radio / RadioButton |
RadioButton API
RadioButton Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| label | the value of Radio | string / number / boolean | — |
| disabled | whether Radio is disabled | boolean | false |
| name | native 'name' attribute | string | — |
RadioButton Slots
| Name | Description |
|---|---|
| default | customize default content |