VueSelect

GitHub

Selecting made simple

Value chosen for this select : {{ styledValue }}

Keyboard Shortcuts

Use up and down to navigate the list, Enter and Tab to select a line

You can also click on an item in the list to select it.

Default Styling

By default, vue-select comes with zero styling.

See below for which classes to override to get the best settings.

Value chosen for this select : {{ unStyledValue }}

Name	Type	Purpose	Required
suggestions	String[]	The list of suggestions that should appear in the dropdown.
value	String	Sets the initial value.	False (defaults to an empty string)
placeholder	String	Sets the placeholder attribute of the input.	False (defaults to an empty string)

Name	Type	Triggered
input	String	When the value in the select changes, either by typing or selection.

v-model

vue-select supports using the v-model syntax. The values will automagically by synced to the parent.

The following styles can be overridden to match the style of your page.

The entire list of suggestions.

Place a max-height to limit the height of the suggestion box.

An individual suggestion.

Try the :hover pseudo-attribute to show which suggestion the user has their cursor over.

The suggestion that the user currently has selected.

Place a background-color to show which suggestion the user currently has highlighted.