A fully accessible, easy-to-style custom select component for Vue.js.
Keyboard Interactions:
Down Arrow
– Moves focus and selection to the next option.Up Arrow
– Moves focus and selection to the previous option.Home
– Moves focus and selection to the first option.End
– Moves focus and selection to the last option.
How to use it:
1. Install and import the module.
import Vue from "vue"; import { VueAccessibleSelect } from "vue-accessible-select";
2. Insert the accessible select component into your template.
<vue-accessible-select v-model="value" :options="options" :disabled="disabled" label="Select" placeholder="Select" > <template v-slot:prepend> <svg viewBox="0 0 54 54"> <path d="M27 1l8 17 19 3-14 13 4 19-17-9-17 9 3-19L0 21l19-3z"></path> </svg> </template> <template v-slot:label> <strong>😋 Just a label slot:</strong> </template> <template v-slot:placeholder>🎃 I am a placeholder slot</template> <template v-slot:selected="{ value, option }">🔥 Woooow, {{ option.label }}</template> <template v-slot:option="{ option }">{{ option.label }}.</template> </vue-accessible-select> <output> <span class="tag" style="margin-right: 4px;">Value:</span> <code>{{ value }}</code> </output>
3. Register the component and define your own options.
export default { name: "App", components: { VueAccessibleSelect }, data() { return { value: undefined, options: [ { value: 0, label: "🍇 Grape" }, { value: { foo: "bar" }, label: "🍉 Watermelon" }, { value: { foo: "bar" }, label: "🥝 Kiwi" }, { value: false, label: "🥭 Mango" }, { value: true, label: "🍓 Strawberry" }, { value: "lemon", label: "🍋 Lemon" }, { value: "melon", label: "🍈 Melon" }, { value: "foo", label: "Lorem ipsum dolor sit amet" } ], disabled: false }; } };
4. All default props.
options: { type: Array, required: true, }, value: { required: true, }, transition: { type: Object, default: () => config.transition || {}, }, label: String, placeholder: String, disabled: Boolean
Preview:
Changelog:
v1.2.1 (01/08/2021)
- fix: don’t select the first option on Esc key
v1.2.0 (12/09/2021)
- Add IE11 relatedTarget fix
Download Details:
Author: andrewvasilchuk
Live Demo: accessible-select-component
Download Link: https://github.com/andrewvasilchuk/vue-accessible-select/archive/master.zip
Official Website: https://github.com/andrewvasilchuk/vue-accessible-select
Install & Download:
# Yarn
$ yarn add vue-accessible-select
# NPM
$ npm install vue-accessible-select --save