Vuetify Select: How to Create Dropdown Lists with Vuetify
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>
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>
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:
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.
We can now choose one of the options:
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>
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 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 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>
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>
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>
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>
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>
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>
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>
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>
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.
