## Radio Single selection among multiple options. ### Basic usage Radio should not have too many options. Otherwise, use the Select component instead. :::demo Creating a radio component is easy, you just need to bind a variable to Radio's `v-model`. It equals to the value of `label` of the chosen radio. The type of `label` is `String` or `Number`. ```html ``` ::: ### Disabled `disabled` attribute is used to disable the radio. :::demo You just need to add the `disabled` attribute. ```html ``` ::: ### Radio button group Suitable for choosing from some mutually exclusive options. :::demo Combine `` with `` to display a radio group. Bind a variable with `v-model` of `` element and set label value in ``. It also provides `change` event with the current value as its parameter. ```html optionA optionB optionC ``` ::: ### Button style Radio with button styles. :::demo You just need to change `` element into `` element. We also provide `size` attribute for these buttons: `large` and `small`. ```html ``` ::: ### Radio 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-group Attributes Attribute | Description | Type | Accepted Values | Default ---- | ---- | ---- | ---- | ---- size | the size of radio buttons | string | large/small | — ### Radio-group Events | Event Name | Description | Parameters | --- | --- | --- change | triggers when the bound value changes | the label value of the chosen radio ### Radio-button Attributes Attribute | Description | Type | Accepted Values | Default ---- | ---- | ---- | ---- | ---- label | the value of radio | string/number | — | — disabled | whether radio is disabled | boolean | — | false fill | border and background color when button is active | string | — | #20a0ff | text-color | font color when button is active | string | — | #ffffff |