Radio

The QRadio component is another basic element for user input. You can use this to supply a way for the user to pick an option from multiple choices.

TIP

Please also refer to the QOptionGroup on other possibilities for creating groups of Radios.

Installation

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

Usage

Standard

Standard

Dense

Dense

Coloring

In the second row in the example below, the property keep-color is being used to retain the passed in color when the radio button is not in a toggled state.

Coloring

Dark and disable

On a dark background
Disable

Label on left-side

Label on left side

Sizes

Apart from the standard sizes below, you can define your own through the size property (last one is a custom size).

Standard sizes

With QOptionGroup

TIP

You can also use QOptionGroup, which simplifies the usage when you have groups of radios, like in example below.

Usage with QOptionGroup

With QItem

In the example below, we are rendering a <label> tag (notice tag="label") so the QRadio will respond to clicks on QItems to change toggle state.

With QItem

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 QRadio, 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

QRadio API

Loading API...
Please wait...