# Radio
Radio
component replaces HTML's <input type='radio'/>
with stylish and more functional element.
# Simple usage
The way to use Radio
component is to provide radioValue
prop as a String
and attach same variable to v-model
for all
radio components in the group of radio elements. The value of radioValue
should be unique for different Radio
elements.
Once user selects one of the radio inputs, selected Radio
's radioValue
will be set to variable bound via v-model
.
Selected user:
<radio v-model="radioModel" name="user_name" radio-value="Bob">Bob</radio>
<radio v-model="radioModel" name="user_name" radio-value="John">John</radio>
<radio v-model="radioModel" name="user_name" radio-value="Jackie">Jackie</radio>
<radio v-model="radioModel" name="user_name" radio-value="Taylor">Taylor</radio>
<script>
export default {
data(){
return {
radioModel:'',
}
}
}
</script>
# Disabled radio
Provide disabled
prop in order to get disabled state for radio
<radio value="disabled_radio_value" radio-value="disabled_radio_value" disabled>Disabled checked</radio>
<radio disabled>Disabled unchecked</radio>
# Props
name | default | description | required | type |
---|---|---|---|---|
label | Label for radio | false | String | |
value | false | Is radio checked | false | 0 |
disabled | false | If set to true - radio will be disabled | false | Boolean |
name | Name attribute for checkbox input | false | String | |
radioValue | Value attribute for radio input | false | String |
← Progress Bar Select →