Radio
A binary input that always exists in a group, in which only one input can be on at a time.
Typical use will involve using v-for to loop through an array of items and output a Radio component for each one. Each Radio will have the same v-model binding and name prop, but different inputValue props and label content.
The v-model value is the inputValue of the Radio that is currently on.
Demos
Radio group
<template>
<div>
<p>Radio group value: {{ radioValue }}</p>
<cdx-radio
v-for="radio in radios"
:key="'radio-' + radio.value"
v-model="radioValue"
name="radio-group"
:input-value="radio.value"
:disabled="radio.disabled"
@update:model-value="onUpdate"
>
{{ radio.label }}
</cdx-radio>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import CdxRadio from 'vue-components/src/components/radio/Radio.vue';
export default defineComponent( {
name: 'RadioGroup',
components: { CdxRadio },
setup() {
const radioValue = ref( 'radio-2' );
const radios = [
{
label: 'Radio 1',
value: 'radio-1',
disabled: false
},
{
label: 'Radio 2 (initially selected)',
value: 'radio-2',
disabled: false
},
{
label: 'Radio 3, which has a very long label that spans onto a second line to demonstrate what happens when text wraps',
value: 'radio-3',
disabled: false
},
{
label: 'Radio 4 (disabled)',
value: 'radio-4',
disabled: true
}
];
const onUpdate = ( value: string ): void => {
console.log( 'update:modelValue event: ' + value );
};
return {
radioValue,
radios,
onUpdate
};
}
} );
</script>
<style scoped>
p {
margin-top: 0;
font-weight: bold;
}
</style>
Inline radios
<template>
<div>
<cdx-radio
v-for="radio in radios"
:key="'radio-' + radio.value"
v-model="radioValue"
name="inline-radios"
:input-value="radio.value"
:inline="true"
@update:model-value="onUpdate"
>
{{ radio.label }}
</cdx-radio>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import CdxRadio from 'vue-components/src/components/radio/Radio.vue';
export default defineComponent( {
name: 'InlineRadios',
components: { CdxRadio },
setup() {
const radioValue = ref( 'radio-2' );
const radios = [
{
label: 'Radio 1',
value: 'radio-1'
},
{
label: 'Radio 2',
value: 'radio-2'
}
];
const onUpdate = ( value: string ): void => {
console.log( 'update:modelValue event: ' + value );
};
return {
radioValue,
radios,
onUpdate
};
}
} );
</script>
Usage
Props
| Prop name | Description | Type | Values | Default |
|---|
| modelValue | Value provided by v-model binding in the parent component. | string|number|boolean | - | '' |
| inputValue | HTML "value" attribute to assign to the input.
Required for input groups. | string|number|boolean | - | false |
| name | HTML "name" attribute to assign to the input.
Required for input groups | string | - | '' |
| disabled | Whether the disabled attribute should be added to the input. | boolean | - | false |
| inline | Whether the component should display inline.
By default, display: block is set and a margin exists between
sibling components, for a stacked layout. | boolean | - | false |
Events
| Event name | Properties | Description |
|---|
| update:modelValue | modelValue string | number | boolean - The new model value | Emitted when modelValue changes. |
Slots
| Name | Description | Bindings |
|---|
| default | Input label content | |