QRadio 📻
QRadios are used when only one choice may be selected in a series of options.
Example
Default view:
Props
value
- Type:
String | Number | Boolean - Default:
null
Binding value.
<q-radio
:checked="false"
:value="1"
label="Option"
/>
1
2
3
4
5
2
3
4
5
label
- Type:
String - Default:
null
The Radio's label.
<q-radio
:checked="false"
:value="1"
label="Option"
/>
1
2
3
4
5
2
3
4
5
labelSize
- Type:
String - Default:
regular
The Radio's label size.
<q-radio
:checked="false"
:value="1"
label="Option"
label-size="small"
/>
1
2
3
4
5
6
2
3
4
5
6
checked
- Type:
Boolean - Default:
false
Whether Radio is checked.
<q-radio
:checked="false"
:value="1"
label="Option"
/>
1
2
3
4
5
2
3
4
5
disabled
- Type:
Boolean - Default:
false
Whether Radio is disabled.
<q-radio
:checked="false"
:value="1"
label="Option"
disabled
/>
1
2
3
4
5
6
2
3
4
5
6
Events
change
Triggers when value updates.
<q-radio
:checked="false"
:value="1"
label="Option"
@change="handleValueChange"
/>
1
2
3
4
5
6
2
3
4
5
6
Slots
default
Set custom content as label.
<q-radio
:checked="true"
:value="1"
>
<b>label from slot<b>
</q-radio>
1
2
3
4
5
6
2
3
4
5
6
QRadioGroup 📻📻📻
As you're not to be able to use QRadio in isolation (if you're making great UX), we recommend using QRadio's inside a group.
<q-radio-group
v-model="value"
@change="handleChange"
>
<q-radio :value="1" label="Option A"></q-radio>
<q-radio :value="2" label="Option B"></q-radio>
<q-radio :value="3" label="Option C"></q-radio>
</q-radio-group>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
export default {
setup() {
const value = ref(1);
const handleChange = newValue => {
console.log(newValue);
};
return { value, handleChange };
}
};
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
QRadioGroup props
modelValue
- Type:
String | Number | Boolean - Default:
null
The binding value.
<q-radio-group
v-model="value"
...
>
1
2
3
4
2
3
4
direction
- Type:
'vertical' | 'horizontal' - Default:
'vertical'
Defines the direction. Whether radio buttons are in the row or column.
<q-radio-group
v-model="value"
direction="horizontal"
...
>
1
2
3
4
5
2
3
4
5
disabled
- Type:
Boolean - Default:
false
Whether QRadioGroup is disabled.
tag
- Type:
String - Default:
div
Custom wrapper tag.
QRadioGroup Events
update:modelValue
Triggers when the model is being updated.
change
Alias for update:modelValue.
<q-radio-group
v-model="value"
@change="handleValueChange"
...
>
1
2
3
4
5
2
3
4
5
QRadioGroup Slots
default
Default slot is being used to include QRadio buttons inside only.