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 -->
<q-radio v-model="option" val="opt1" label="Option 1" />
<q-radio v-model="option" val="opt2" label="Option 2" />
<q-radio v-model="option" val="opt3" label="Option 3" />

Vue Properties

Supports v-model which you should bind to a String in your scope. Choosing one option (clicking/tapping on a radio) makes your v-model change to Radio’s val.

Vue PropertyTypeDescription
valObjectUsed to modify the v-model of the Radio.
labelStringThe text label for the Radio.
left-labelBooleanSet to true, if the label should be placed to the left of the radio.
checked-iconStringThe icon to use, when the radio is checked. Default is a simple radio icon.
unchecked-iconStringThe icon to use, when the radio is not checked. Default is simple unchecked radio icon.
colorStringColor from Quasar Color Palette of the Radio.
keep-colorBooleanKeep color when not selected.
readonlyBooleanSet to true, to make the radio read-only.
disableBooleanSet to true, to disable the radio.
darkBooleanSet to true when background is dark.
no-focusBoolean(v0.17+) Disable accessibility for this component so that it can’t receive focus.

Vue Events

Vue EventDescription
@inputTriggered when Radio gets selected.
@blurTriggered, when Radio loses focus.
@focusTriggered, when Radio gains focus.

More Examples

There are a number of props, which are available to help you quickly format a Radio. An interesting feature of Radio is the ripple effect that user sees 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>
  <!--
    Rendering a <label> tag (notice tag="label")
    so the whole QItem will respond to clicks to
    change Toggle state.
  -->
  <q-item tag="label">
    <q-item-side>
      <q-radio v-model="option" val="opt1" />
    </q-item-side>
    <q-item-main>
      <q-item-tile label>Option 1</q-item-tile>
    </q-item-main>
  </q-item>
  <q-item tag="label">
    <q-item-side>
      <q-radio v-model="option" val="opt2" />
    </q-item-side>
    <q-item-main>
      <q-item-tile label>Option 2</q-item-tile>
      <q-item-tile sublabel>Allows notifications</q-item-tile>
    </q-item-main>
  </q-item>
  <q-item tag="label">
    <q-item-side>
      <q-radio v-model="option" val="opt3" />
    </q-item-side>
    <q-item-main>
      <q-item-tile label>Option 3</q-item-tile>
      <q-item-tile sublabel>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </q-item-tile>
    </q-item-main>
  </q-item>
</q-list>
Range Checkbox
Last updated: Sat May 25 2019
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub