Custom Select Elements

Practice

Almost every major project that uses forms has experienced the need for custom select dropdowns. Unfortunately, CSS still doesn't offer many possibilities to style select dropdowns. Any additional functionality must be implemented asynchronously alongside a custom component, such as tagged input, search, or loading options. This extra effort creates many questions about accessibility, usability, and scope.

Fortunately, there are many tested and well-maintained libraries that can be used to achieve styleable, configurable custom select dropdowns. One of these that has been developed specifically for Vue is vue-select. It offers many features, such as tagging, filtering, searching, Vuex support, XHR support, SSR support, accessibility, customization options, as well as single and multiselect options. Moreover, it does so with little overhead of around 20 KB and no extra dependencies.

Getting started with vue-select

To install vue-select, we need to execute npm i -s vue-select@beta. We can leave the @beta version specification once full support for Vue 3 is released. Then, we need to load and register the component like any other custom component in Vue, as illustrated below. The component will then be available as <v-select /> and behave mostly like a standard <select /> element. To style the component, we also need to import the file vue-select-3/dist/vue-select.css once, ideally in main.js.