Vs Vue3 Select

WAI-ARIA Spec

Vs Vue3 Select aims to follow the WAI-ARIA best practices for the comboboxopen in new window and listboxopen in new window widgets.

The UX of the component is designed around the HTML <select> element, while following the WAI-ARIA specifications and best practices for creating accessible components.

Autocomplete

WAI-ARIA suggests four forms of autocomplete for Comboboxes. Vs Vue3 Select can be configured to provide these use cases.

1. No autocomplete

The combobox is editable, and when the popup is triggered, the suggested values it contains are the same regardless of the characters typed in the combobox. For example, the popup suggests a set of recently entered values, and the suggestions do not change as the user types

<v-select
  :filterable="false"
  :options="['No Autocomplete', 'List Autocomplete']"
/>

2. List autocomplete with manual selection

When the popup is triggered, it presents suggested values. If the combobox is editable, the suggested values complete or logically correspond to the characters typed in the combobox. The character string the user has typed will become the value of the combobox unless the user selects a value in the popup.

<v-select taggable :options="['No Autocomplete', 'List Autocomplete']" />

3. List autocomplete with automatic selection

The combobox is editable, and when the popup is triggered, it presents suggested values that complete or logically correspond to the characters typed in the combobox, and the first suggestion is automatically highlighted as selected. The automatically selected suggestion becomes the value of the combobox when the combobox loses focus unless the user chooses a different suggestion or changes the character string in the combobox.

<v-select 
     :options="['Other case','No Autocomplete', 'List Autocomplete']" 
     :auto-select="true" />

4. List with inline autocomplete v1.2.0+

This is the same as list with automatic selection with one additional feature. The portion of the selected suggestion that has not been typed by the user, a completion string, appears inline after the input cursor in the combobox. The inline completion string is visually highlighted and has a selected state.

Autocompleted option is shown if it starts with the characters typed by the user.

<v-select :options="['Other case','No Autocomplete', 'List Autocomplete']" 
          :auto-select="true"  
          :complete-search="true" />