Select & Multi Select implementations for Vue, focused especially on implementing accessibility best practices

Usage no npm install needed!

<script type="module">
  import politicoVueAccessibleSelects from 'https://cdn.skypack.dev/@politico/vue-accessible-selects';



npm version Netlify Status

Current Development

This entire repo is very much in an alpha state, and should currently be used only within internal Politico projects, as props / events / classes remain fluid. However, we are working towards a 1.0.0 release, and want to capture our relevant bugs fixed during that process.


Current Usage (updated 9/25/20)

npm i @politico/vue-accessible-selects
// In component

import { SelectSingle, SelectMulti } from '@politico/vue-accessible-selects'

const sampleOptions = [{
    label: 'One Option',
    value: 'one_option'
}, {
    label: 'Another Option',
    value: 'another_option'

export default {
    components: { SelectSingle, SelectMulti },
    data() {
        return {
            selectSingleValue: {},
            selectMultiValues: []

<!-- In component -->
    label="My Single Select"

    label="My Multiple Select"
    placeholder="Default Text to Display"

WARNING! node-sass deprecated

To compile scss code you must use dart sass package as it uses sass:math module for divisions instead of slash https://sass-lang.com/documentation/breaking-changes/slash-div

node-sass is deprecated

// In any .scss file
// Simple, use default styles provided by lib
@import '~@politico/vue-accessible-selects/styles';

@include selects();
@include select-single();
@include select-multi();

for more detailed implementations, checkout the docs site

Custom Styling

As we determine the most-commonly externally-referenced classes, we'll add them here

  • .combo-input
  • .combo-menu