Option Group

The QOptionGroup component is a helper component that allows you better control for grouping binary (on or off, true or false, 1 or 0) form input components like checkboxes, radios or toggles. A good use for this component is for offering a set of options or settings to turn on and off.

Installation

// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QOptionGroup'
    ]
  }
}

Usage

Standard

Standard

With QCheckbox or QToggle

With checkboxes

WARNING

The model for checkboxes/toggles must be an array.

With toggles

With labels on left side

With option labels on the left side

Inline

Inline

Dense

Dense and inline

Disable

Disabled

TIP

The objects within the options array can hold any of the props found in QToggle, QCheckbox or QRadio for instance disable or leftLabel. See below for an example.

Disable Certain Options

Disable Certain Options

Dark

On a dark background

Native form submit

When dealing with a native form which has an action and a method (eg. when using Quasar with ASP.NET controllers), you need to specify the name property on QOptionGroup, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):

Native form

QOptionGroup API