Accessible Multiple Select Component

Install & Download:

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

Description:

An accessible, WAI-ARIA compliant, easy-to-style multiple select component with autocomplete/typeahead support.

Keyboard navigation:

Down Arrow Moves focus to the next option
Up Arrow Moves focus to the previous option
Home Moves focus to first option
End Moves focus to last option
Space Changes the selection state of the focused option
Shift + Down Arrow Moves focus to and toggles the selected state of the next option
Shift + Up Arrow Moves focus to and toggles the selected state of the previous option
Shift + Space Selects contiguous items from the most recently selected item to the focused item
Control + Shift + Home Selects the focused option and all options up to the first option. Moves focus to the first option.
Control + Shift + End Selects the focused option and all options down to the last option. Moves focus to the last option
Control + A Selects all options in the list. If all options are selected, unselects all options

How to use it:

1. Import Vue and the vue-accessible-multiselect component.

import Vue from 'vue'
import VueAccessibleMultiselect from 'vue-accessible-multiselect'

2. Import CSS styles.

// Core
@import 'vue-accessible-multiselect/src/styles/core.scss';
// Optional Theme
@import 'vue-accessible-multiselect/src/styles/themes/default.scss';

3. Register the component.

// as a plugin
Vue.use(VueAccessibleMultiselect)
// as a component
Vue.component('VueAccessibleMultiselect', VueAccessibleMultiselect)
// or 
export default {
  name: 'YourAwesomeComponent',
  components: {
    VueAccessibleMultiselect,
  },
}

4. Add the vue-accessible-multiselect component to the template and define the options as follows:

<template>
  <vue-accessible-multiselect
    v-model="value"
    :options="options"
    disabled
  ></vue-accessible-multiselect>
</template>

export default {
  // ...
  data() {
    return {
      value: [],
      options: [
        {
          value: 0,
          label: 'JavaScript',
        },
        {
          value: { foo: 'bar' },
          label: 'HTML',
        },
        {
          value: [1, 2, 3],
          label: 'CSS',
        },
        {
          value: false,
          label: 'React',
        },
        {
          value: true,
          label: 'Angular',
        },
        {
          value: 'vue',
          label: 'Vue.js',
        },
      ],
    }
  },
}

5. Default props.

options: {
  type: Array,
  required: true,
  validator: optionsValidator,
},
value: {
  required: true,
  validator: valueValidator,
},
transition: {
  type: Object,
  default: () => config.transition || null,
  validator: transitionValidator,
},
label: String,
placeholder: String,
disabled: Boolean,