Option Group     

The Quasar Option Group component is a helper component, which allows you to better control the grouping of binary (as in on or off, true or false, 1 or 0) form input components like checkboxes, radios or toggles. A good usage for this component is for offering the user a set of options or settings to turn on and off, and thus the name of the component.

Works well with QField for additional functionality such as a helper, error message placeholder and many others.

Installation

Edit /quasar.conf.js:

framework: {
components: ['QOptionGroup']
}

Basic Usage

Example on a group of checkboxes:

<template>
<q-option-group
color="secondary"
type="checkbox"
v-model="group"
:options="[
{ label: 'Option 1', value: 'op1' },
{ label: 'Option 2', value: 'op2' },
{ label: 'Option 3', value: 'op3' }
]"
/>
</template>

<script>
export default {
data () {
return {
// `v-model` binded to `group`,
// which must be an array for checkboxes and toggles
group: ['opt1']
}
}
}
</script>

Example on a group of radios:

<template>
<q-option-group
color="secondary"
type="radio"
v-model="group"
:options="[
{ label: 'Option 1', value: 'op1' },
{ label: 'Option 2', value: 'op2' },
{ label: 'Option 3', value: 'op3' }
]"
/>
</template>

<script>
export default {
data () {
return {
// `v-model` binded to `group`,
// which must be a String when using radios
group: 'opt1'
}
}
}
</script>

Vue Properties

Supports v-model, which is required. For “radio” type it must be a String, otherwise (“checkbox” or “toggle” type) your scope variable that you bind to v-model must be an Array.

Vue PropertyTypeDescription
typeStringThe type of input component to be used. The default is radio. The other choices are checkbox and toggle.
optionsArrayAn array of objects with value and label properties. The binary components will be created according to this array.
left-labelBooleanWhen set to true, the labels will be put on the left side.
inlineBooleanAdjusts the display of the binary components fill out the row, instead of being stacked vertically.
colorStringColor from Quasar Color Palette.
keep-colorBooleanKeep color when not selected/truthy too.
readonlyBooleanSet to true, to make the binary components read-only.
disableBooleanWhen set to true, the binary components are not selectable thus cannot change your v-model.
darkBooleanSet to true when background is dark.
no-parent-fieldBooleanAvoid trying to connect to a parent QField.

Vue Events

Vue EventDescription
@inputTriggered immediately when model changes.
@changeFired when the component model changes.
@focusFired when the component gets focus.
@blurFired when the component loses focus.

Lazy Input

Vue will soon supply the .lazy modifier for v-model on components too, but until then, you can use the longer equivalent form:

<q-option-group
type="radio"
:value="model"
@change="val => { model = val }"
:options="[
{ label: 'Option 1', value: 'op1' },
{ label: 'Option 2', value: 'op2' },
{ label: 'Option 3', value: 'op3' }
]"
/>

Other Examples

A group of radios with different colors.

<q-option-group
type="radio"
v-model="group"
:options="[
{ label: 'Option 1', value: 'op1' },
{ label: 'Option 2', value: 'op2', color: 'secondary' },
{ label: 'Option 3', value: 'op3', color: 'amber' }
]"
/>

And a group of toggles, but not stacked vertically when possible. We add inline Boolean property.

<q-option-group
inline
type="toggle"
v-model="group"
:options="[
{ label: 'Option 1', value: 'op1' },
{ label: 'Option 2', value: 'op2' },
{ label: 'Option 3', value: 'op3' }
]"
/>

You would normally also add this component inside a QField component as shown below.

<q-field
icon="cloud"
helper="Choose your option"
label="Pick something"
:error="hasError"
error-label="Select at least one option"
>
<q-option-group
type="radio"
v-model="group"
:options="[
{ label: 'Option 1', value: 'op1' },
{ label: 'Option 2', value: 'op2' },
{ label: 'Option 3', value: 'op3' }
]"
/>
</q-field>