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 Property Type Description
type String The type of input component to be used. The default is radio. The other choices are checkbox and toggle.
options Array An array of objects with value and label properties. The binary components will be created according to this array.
left-label Boolean When set to true, the labels will be put on the left side.
inline Boolean Adjusts the display of the binary components fill out the row, instead of being stacked vertically.
color String Color from Quasar Color Palette.
keep-color Boolean Keep color when not selected/truthy too.
readonly Boolean Set to true, to make the binary components read-only.
disable Boolean When set to true, the binary components are not selectable thus cannot change your v-model.
dark Boolean Set to true when background is dark.
no-parent-field Boolean Avoid trying to connect to a parent QField.

Vue Events

Vue Event Description
@input Triggered immediately when model changes.
@change Fired when the component model changes.
@focus Fired when the component gets focus.
@blur Fired 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>