Quasar 
Radio
The Quasar Radio 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 Option Group documentation on other possibilities for creating groups of Toggles.
Works well with QField for additional functionality such as a helper, error message placeholder and many others.
Installation
Edit /quasar.conf.js:framework: {
components: ['QRadio']
}
Basic Usage
<!-- Three choices for the user --> |
Vue Properties
Supports v-model which should be binded to a String in your scope. Choosing one option (clicking/tapping on a radio) makes your v-model change to Radio’s val.
| Vue Property | Type | Description |
|---|---|---|
val | Object | Used to modify the v-model of the Radio with. |
label | String | The text label for the Radio. |
left-label | Boolean | Set to true, if the label should be placed to the left of the radio. |
checked-icon | String | The icon to use, when the radio is checked. Default is a simple radio icon. |
uncheck-icon | String | The icon to use, when the radio is not checked. Default is simple unchecked radio icon. |
color | String | Color from Quasar Color Palette of the Radio. |
keep-color | Boolean | Keep color when not selected too. |
readonly | Boolean | Set to true, to make the radio read-only. |
disable | Boolean | Set to true, to disable the radio. |
dark | Boolean | Set to true when background is dark. |
Vue Events
| Vue Event | Description |
|---|---|
@input | Triggered when it gets selected. |
@blur | Triggered, when Radio loses focus. |
@focus | Triggered, when Radio gains focus. |
More Examples
There are a number of props, which are available to help quickly format a Radio. An interesting feature of Radio is the ripple effect that user gets when clicking/tapping on it to change its state.
Specific State Icons
Instead of the default radio icon, you can also use the checked-icon and unchecked-icon props to display a different icon.<q-radio
v-model="option"
val="opt1"
unchecked-icon="visibility_off"
checked-icon="visibility"
label="Show only Area 1"
/>
<q-radio
v-model="option"
val="opt2"
unchecked-icon="visibility_off"
checked-icon="visibility"
label="Show only Area 2"
/>
<q-radio
v-model="option"
val="opt3"
unchecked-icon="visibility_off"
checked-icon="visibility"
label="Show only Area 3"
/>
Coloring
Use the color prop to control the Radio color.<!-- Default color, which is "primary" -->
<q-radio v-model="option" val="opt2" />
<!-- Teal -->
<q-radio v-model="option" val="opt3" color="teal" />
<!-- Orange-7 -->
<q-radio v-model="option" val="opt4" color="orange-7" />
Label Position
Use the left-label prop, to move the label to the left of the radio.<q-radio
v-model="option"
val="opt2"
left-label
label="Option 2"
/>
Usage Inside of a List
<q-list link> |