## Radio A single selection is made in a set of alternatives. ### How to use As the option is visible by default, there should not be too many options. If too many options, the Select component is recommended. Creating a radio component is easy, you just need to bind a variable by `v-bind` directive, and it means that the value of bound variable is equals to the value of `label` of which the `radio` you select. The type of `label` is `String` or `Number`. :::demo ```html ``` ::: ### Disabled `disabled` attribute is used to disable radio button. You just need to add `disabled` attribute, and default value is `true`. :::demo ```html ``` ::: ### Radio button group Applicable to scenes selecting from multiple mutex options. Combine `` with `` to display a radio group. Bind a variable in `` element and set label value in ``. It also provides `change` event to respond to the change of bound value. :::demo ```html optionA optionB optionC ``` ::: ### Button style Radio with button styles. You just need to change `` element into `` element. Element also provides `size` attribute for the buttons array. There are two options: `large` and `small` if not default. :::demo ```html ``` ::: ### Radio Attributes Attribute | Description | Type | options | Default ---- | ---- | ---- | ---- | ---- label | the value of radio | string, number | --- | --- disabled | whether disabled or not | boolean | --- | false ### Radio-group Attributes Attribute | Description | Type | options | Default ---- | ---- | ---- | ---- | ---- size | the size of radio button | string | large, small | --- ### Radio-group Events Event | Description | callback parameters --- | --- | --- change | event triggered when the bound variable changes | the label value of the radio which you select ### Radio-button Attributes Attribute | Description | Type | options | Default ---- | ---- | ---- | ---- | ---- label | the value of radio | string, number | --- | --- disabled | whether disabled or not | boolean | --- | false