Vue.js Accessible Multiselect Component Library

vue-access-multiselect is a Vue.js accessible multi-select component built according to WAI-ARIA practices.

vue js multi select component codesandbox, multi select dropdown accessibility, multi select component react, custom multi select dropdown, multi select with search, multi select list

Features

♿️ Full access to screen readers;
⌨️ Supports keyboard navigation (there are already a lot of keyboard shortcuts);
🔣 Writing forward to focus on the option that begins with the symbols written;
💅 is style neutral, so you can design it however you like (but including core.scss is highly encouraged).

Powered by

Rollup (and plugins)
Babel
SASS and node-sass
PostCSS
Autoprefixer
Jest
Vue Test Utils
keycode-js
lodash

Universal Select/Multiselect/Tagging Component for Vue.js

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-accessible-multiselect

# NPM
$ npm install vue-accessible-multiselect --save

1. Import Vue and the vue-access-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-access-multiselect component to the template and specify 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,

⌨️ Keyboard navigation

Down Arrow Moves focus to the next option
Up Arrow Moves focus to the previous option
Home Moves focus to the first option
End Moves focus to the last option
Space Changes the selection state of the focused option
Shift + Down Arrow Moves focus to and toggle the selected state of the next option
Shift + Up Arrow Moves focus to and toggle 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 on 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, unselect all options