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 binded 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.

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>
Button Toggle Datetime Input
Last updated: Mon Jul 23 2018
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub