Vuetify Select: How to Create Dropdown Lists with Vuetify
![Vuetify Select: How to Create Dropdown Lists with Vuetify](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fvuetify-select.png&w=3840&q=75)
Dropdown lists are useful for getting user input from a known group of options, e.g., selecting a country among all the countries in the world, or choosing the hour of the day for an alarm. There are also known as select fields. In this article, we're going to learn how use the Vuetify Select component to start creating dropdown lists in our apps.
The v-select Component
Vuetify provides the v-select
component for creating select fields:
<template>
<v-app>
<v-row justify="center">
<v-col sm="6"><v-select></v-select></v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
![A Vuetify select field.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fimage-32.png&w=3840&q=75)
Vuetify Select Field Labels
We can describe a dropdown list with the label
prop of v-select
. We are going to be display a list of colors, so let's label it "Color":
<template>
<v-app>
<v-row justify="center" class="ma-2">
<v-col sm="6"><v-select label="Color"></v-select></v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
![A Vuetify select field with a label.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fimage-22.png&w=3840&q=75)
Vuetify Select Field Items
There are not options to select from in the dropdown list yet. Here's what shows up when you click it:
![No data available.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fimage-23.png&w=3840&q=75)
We can add items by assigning an array to the items
prop. The items will be a group of colors.
<template>
<v-app>
<v-row justify="center" class="ma-2">
<v-col sm="6"
><v-select label="Color" :items="items"></v-select
></v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
items: ['Blue', 'Red', 'Yellow', 'Green'],
}),
};
</script>
Now there are options in the dropdown list.
![A dropdown list with options.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fimage-20.png&w=3840&q=75)
We can now choose one of the options:
![Choosing one of the options from the dropdown list.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fimage-21.png&w=3840&q=75)
Vuetify Select Set Default Value
To set a default value for a dropdown list, we can use v-model
to create a two-way binding between the current value of the dropdown list and a variable. The initial value of this variable will be the default value of the select field:
<template>
<v-app>
<v-row justify="center" class="ma-2">
<v-col sm="6"
><v-select
label="Color"
:items="items"
v-model="defaultSelection"
></v-select
></v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
defaultSelection: 'Yellow',
items: ['Blue', 'Red', 'Yellow', 'Green'],
}),
};
</script>
![Setting a default value for a Vuetify select field.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fimage-31.png&w=3840&q=75)
Vuetify Select Field Filled Variant
We can set an alternative filled variant for a select field with the filled
prop:
<template>
<v-app>
<v-row justify="center" class="ma-2">
<v-col sm="6"
><v-select label="Color" :items="items" filled></v-select
></v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
items: ['Blue', 'Red', 'Yellow', 'Green'],
}),
};
</script>
![Vuetify select field field variant.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fimage-19.png&w=3840&q=75)
Vuetify Select Field Outlined Variant
We can also use an alternative outlined style, by setting the outlined
prop of v-select
to true
:
<template>
<v-app>
<v-row justify="center" class="ma-2">
<v-col sm="6"
><v-select label="Color" :items="items" outlined></v-select
></v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
items: ['Blue', 'Red', 'Yellow', 'Green'],
}),
};
</script>
![Vuetify select outlined variant.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fimage-18.png&w=3840&q=75)
Vuetify Select Field Solo Variant
We can use the solo variant with the solo
prop:
<template>
<v-app>
<v-row justify="center" class="ma-2">
<v-col sm="6"
><v-select label="Color" :items="items" solo></v-select
></v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
items: ['Blue', 'Red', 'Yellow', 'Green'],
}),
};
</script>
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fimage-11.png&w=3840&q=75)
Dense Select Fields
Setting the dense
prop to true
on a v-select
will compact the dropdown list:
<template>
<v-app>
<v-row justify="center" class="ma-2">
<v-col sm="6"
><v-select label="Color" :items="items" outlined dense></v-select
></v-col>
<v-col sm="6"
><v-select label="Color" :items="items" solo dense></v-select
></v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
items: ['Blue', 'Red', 'Yellow', 'Green'],
}),
};
</script>
![Dense dropdown lists.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fimage-17.png&w=3840&q=75)
Disabled Select Fields
To prevent interactivity with a select field, use the disabled
prop:
<template>
<v-app>
<v-row justify="center" class="ma-2">
<v-col sm="6"
><v-select label="Color" :items="items" disabled></v-select
></v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
items: ['Blue', 'Red', 'Yellow', 'Green'],
}),
};
</script>
![A disabled Vuetify select field.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fimage-16.png&w=3840&q=75)
Select Field Icons
The prepend-icon
prop allows us to prepend an icon to a dropdown list. Here we're displaying a palette icon to represent color:
<template>
<v-app>
<v-row justify="center" class="ma-2">
<v-col sm="6"
><v-select
label="Color"
:items="items"
prepend-icon="mdi-palette"
></v-select
></v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
items: ['Blue', 'Red', 'Yellow', 'Green'],
}),
};
</script>
![Using the v-select prepend-icon prop.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fimage-15.png&w=3840&q=75)
Similarly, we can use the append-icon
prop to append an icon to a select field:
<template>
<v-app>
<v-row justify="center" class="ma-2">
<v-col sm="6"
><v-select
label="Color"
:items="items"
append-icon="mdi-palette"
></v-select
></v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
items: ['Blue', 'Red', 'Yellow', 'Green'],
}),
};
</script>
![Using the v-select append-icon prop.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fimage-24.png&w=3840&q=75)
Multi Select Dropdown Lists in Vuetify
In instances where we want users to be able to select more than one option, we can use the multiple
prop
<template>
<v-app>
<v-row justify="center" class="ma-2">
<v-col sm="6"
><v-select
label="Color"
:items="items"
multiple
></v-select
></v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
items: ['Blue', 'Red', 'Yellow', 'Green'],
}),
};
</script>
![Selecting two options in a dropdown list.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fimage-25.png&w=3840&q=75)
![The dropdown list options are comma-separated.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fimage-29.png&w=3840&q=75)
Displaying Chips in Multi Select Dropdown Lists
We can display the options as a group of chips instead of comma-separated values. We do this with the chips
prop:
<template>
<v-app>
<v-row justify="center" class="ma-2">
<v-col sm="6"
><v-select
label="Color"
:items="items"
multiple
chips
></v-select
></v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
items: ['Blue', 'Red', 'Yellow', 'Green'],
}),
};
</script>
![Displaying chips in multi select dropdown lists.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fimage-28.png&w=3840&q=75)
Customizing Select Field Menu Props
We can customize certain properties of the menu that pops up when the dropdown list is clicked. Modifiable properties include top
, bottom
, offsetX
and offsetY
.
<template>
<v-app>
<v-row justify="center" class="ma-2">
<v-col sm="6"
><v-select
label="Color"
:items="items"
:menu-props="{ offsetX: true }"
></v-select
></v-col>
</v-row>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
items: ['Blue', 'Red', 'Yellow', 'Green'],
}),
};
</script>
![Customizing select field menu props.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fimage-30.png&w=3840&q=75)
Summary
Dropdown lists come in handy when we want to provide a finite list of known options to the user to choose from. Vuetify provides the v-select
component to create and customize them in diverse ways.