Accessible Select Component For Vue.js

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