Accessible Select Component For Vue.js

Install & Download:

# Yarn
$ yarn add vue-accessible-select
# NPM
$ npm install vue-accessible-select --save

Description:

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