Select - Quasar Framework (2024)

<template>
 <div>
 <!-- Single Selection using Radios -->
 <q-select
 v-model="select"
 float-label="Is Quasar Awesome?"
 radio
 :options="selectOptions"
 />

 <!-- Single Selection as a simple List -->
 <q-select
 v-model="select"
 :options="selectOptions"
 />

 <!-- Multiple Selection using Checkboxes by default -->
 <q-select
 multiple
 v-model="multipleSelect"
 :options="selectOptions"
 />

 <!-- Multiple Selection using Toggles -->
 <q-select
 multiple
 toggle
 v-model="multipleSelect"
 :options="selectOptions"
 @change="inputChange"
 />
 </div>
</template>

<script>
export default {
 data () {
 return {
 selectOptions: [
 {
 label: 'Google',
 value: 'goog'
 },
 {
 label: 'Facebook',
 value: 'fb'
 }
 ]
 }
 }
}
</script>

{
 // required icon
 icon: String,
 // required function to call when
 // icon is clicked/tapped
 handler: Function,

 // Optional. Show icon button
 // if model has a value
 content: Boolean,

 // Optional. Show icon button
 // if textfield is marked with error
 error: Boolean
}

<!--
 Show an icon button (with 'warning' as icon)
-->
<q-select
 v-model="selection"
 :options="selectListOptions"
 :after="[
 {
 icon: 'warning',
 handler () {
 // do something...
 }
 }
 ]"
/>

<!--
 Show an icon button (with 'arrow_forward' as icon)
 when the model has a non empty value (like something has
 been selected).
-->
<q-select
 v-model="selection"
 :options="selectListOptions"
 :after="[
 {
 icon: 'arrow_forward',
 content: true,
 handler () {
 // do something...
 }
 }
 ]"
/>

<!-- Radios for single selections -->
<q-select
 radio
 @change="onChange"
 v-model="select"
 float-label="Gogu"
 :options="selectListOptions"
/>

<!-- Toggles for Multiple Selection -->
<q-select
 toggle
 multiple
 v-model="multipleSelect"
 :options="selectListOptions"
/>

selectOptions: [
 {
 label: 'Google',
 value: 'goog'
 },
 {
 label: 'Facebook',
 value: 'fb'
 },
 ...
]

selectListOptions: [
 {
 label: 'Google',
 icon: 'search',
 value: 'goog'
 },
 {
 label: 'Facebook',
 inset: true,
 description: 'Enables communication',
 value: 'fb'
 },
 {
 label: 'Oracle',
 description: 'Some Java for today?',

 icon: 'mail',
 leftColor: 'secondary', // color for left side, whatever it is (icon, letter, ...)

 rightIcon: 'alarm',
 rightColor: 'negative', // color for right side, whatever it is (icon, letter, ...)

 value: 'ora'
 },
 {
 label: 'Apple Inc.',
 inset: true,
 stamp: '10 min',
 value: 'appl'
 },
 ...
]

<q-select
 :display-value="`${ multipleSelect.length } item${ multipleSelect.length !== 1 ? 's' : '' } selected`"
 multiple
 v-model="multipleSelect"
 float-label="Select a company"
 :options="selectLongListOptions"
/>

<template>
 <!-- Notice "display-value" is binded to "text" variable -->
 <q-select
 :display-value="text"
 multiple
 v-model="multipleSelect"
 float-label="Select a company"
 :options="selectLongListOptions"
 />
</template>

<script>
export default {
 data () {
 return {
 multipleSelect: /* value */,
 selectOptions: /* options */
 }
 },
 computed: {
 text () {
 // in this example we want to show how many items are selected,
 // so we need to check model (multipleSelect) length
 return `${this.multipleSelect.length} item${this.multipleSelect.length > 1 ? 's' : ''} selected`
 }
 }
}
</script>

<q-select
 error
 multiple
 v-model="multipleSelect"
 :options="selectOptions"
/>

<!-- Disabled state -->
 <q-select
 disable
 float-label="Disabled Select"
 multiple
 v-model="multipleSelect"
 :options="selectOptions"
/>

<!-- Floating Label -->
<q-select
 float-label="This Label Floats"
 multiple
 v-model="multipleSelect"
 :options="selectOptions"
/>

<!-- Stack Label -->
<q-select
 static-label="Company"
 multiple
 v-model="multipleSelect"
 :options="selectOptions"
/>

<!-- Color -->
<q-select
 color="amber"
 v-model="select"
 :options="selectListOptions"
/>

<!-- Inverted Color -->
<q-select
 inverted
 color="secondary"
 v-model="select"
 :options="selectListOptions"
/>

<!--
 With a color for chips and a different color for the frame.
 Notice "color" and "frame-color". By default, "color" is used
 for both frame and chips, but specifying a frame-color overrides
 the color for the frame.
-->
<q-select
 frame-color="amber"
 inverted
 color="dark"
 multiple
 chips
 v-model="multipleSelect"
 :options="selectListOptions"
 float-label="Some label"
/>

<q-list>
 <q-list-header>Single Selection</q-list-header>
 <q-item>
 <q-item-side icon="supervisor_account" />
 <q-item-main>
 <q-select
 class="no-margin"
 v-model="select"
 :options="selectOptions"
 />
 </q-item-main>
 </q-item>
 <q-item-separator />
 <q-list-header>Multiple Selection</q-list-header>
 <q-item>
 <q-item-side icon="supervisor_account" />
 <q-item-main>
 <q-select
 multiple
 class="no-margin"
 v-model="multipleSelect"
 :options="selectOptions"
 />
 </q-item-main>
 </q-item>
</q-list>