Upgrade toQuasar v2and use Vue.js 3
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.

QOptionGroup API

Usage

Standard




With QCheckbox or QToggle




WARNING

The model for checkboxes/toggles must be an array.




Using label slots
v1.17+

There are two types of slots. A generic one (label) which applies to all options, unless a more specific index-based one is used (label-N where N is the 0-based index of the option). Both types of slots receive the respective option as parameter.

Notice how we use the specific label slot for first option (option at index 0) and we also add a QTooltip.




With labels on left side




Inline




Dense




Disable




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




Dark




Native form submit
v1.9+

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):