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.
Please also refer to the QOptionGroup on other possibilities for creating groups of Radios.
Usage
Standard
With custom icons v2.5+
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.
Force dark mode
Disable
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).
With QOptionGroup
You can also use QOptionGroup, which simplifies the usage when you have groups of radios, like in example below.
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.
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):
Accessibility v2.25+
QRadio exposes role="radio" and reflects its state through aria-checked. The label prop provides the accessible name (aria-label) and a disabled radio exposes aria-disabled="true". It is reachable with Tab (see the tabindex prop) and selects on Enter or Space.
A standalone QRadio has no knowledge of its siblings: each one is its own Tab stop and there is no enclosing radiogroup. For the full WAI-ARIA radio group pattern — a single Tab stop for the whole group, with the arrow keys moving focus and selection (roving tabindex) — wrap your radios in a QOptionGroup.