> For the complete documentation index, see [llms.txt](https://desislavsd.gitbook.io/vue-select/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://desislavsd.gitbook.io/vue-select/props.md). # Props A list with all available props that the vSelect component accepts. {% hint style="success" %} These are the available props. The vSelect component does not inherit attributes and all additional attributes are directly passed to the internal input element and can be used for further altering the behavior of the component like: `disabled`, `readonly`, `pattern`, `required`, `autofocus`. **The fetching function won't be called unless the input is** `:valid` {% endhint %} {% hint style="warning" %} By default the component will try to fetch the options list even if there is no query. If the query is required you may pass the `required` or the `minlength`attribute. The latter is recommended to avoid form HTML5 validation issues when the input is empty. {% endhint %} | Prop | Default | Type | Description | | ----------------- | :------------: | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **value** | | Any | Enables `v-model` usage and determines the selected options. | | **stateful** | `false` | Boolean | By default the component relies on `:value` / `v-model` for displaying the selected options and doesn't persist internal state. This way the UI changes only when the passed value changes. Setting this prop to `true` will enable internal state of the value that will be automatically updated on each `input` event. *This should generally not be used in conjunction with `v-model`* | | **query** | | String | Sets the query string in the input. Supports `sync` modifier. | | **from** | `[]` | Array | Feed with options for the dropdown list | | | | Function | Function that returns the list array. Can be `async` i.e. promises are supported. | | | | String | URL that will be used for fetching the list via AJAX. See **fetch** prop. | | **as** | `undefined` | String |

Required when working with non primitive values (objects) to specify a ":" separated paths to label, value and index in that order for each list option. All paths are required. The index path should point to a unique primitive value for a reliable comparison and better performance. Check VSelectOption and this issue for more details.

Example: as="label:value:id", as="user.name::id"


Notice: In the last example value path was skipped (empty string) resulting in the whole object being assigned to the model.

| | | | Array(String) | An array of paths to **label**, **value** and **index** properties*.* Check [VSelectOption](/vue-select/vselectoption.md) for more details. | | **fetch** | `fetchAdapter` | Function |

asyncfunction that returns the list array.

The default function looks for URL in the from prop and makes requests via Fetch API. If the URL contains %s it will be replaced with the query in the input and will make requests each time the query changes.

Examples:
from="/users" - static url
from="/users?q=%s" - dynamic url

| | **parse** | | String | Path to property of the fetch response that contains the list array. | | | | Function | Function that returns the list array from the fetch response. | | **filter** | *auto* | Boolean |

Force enable / disable list filtering. By default filtering is enabled when from is considered static, i.e:

  1. is an array
  2. is a static URL ( has no %s)
  3. is a function with arity=0 ( expects no arguments )
| | | | Function ( [VSelectOption](/vue-select/vselectoption.md), query ) |

Custom function to filter the list against query.

Notice: If provided it will force enable filtering and will override filterBy

| | **filterBy** | `filterBy` | Function | This is the default filtering function when **filter** prop is `true` | | **tagging** | `false` | Boolean | Enable / disable tagging. When enabled for a list with non primitive values **label** path must be specified in the **as** prop. | | | | Function | Enable / disable tagging based on function returned value. Should return `false` or the option to be used as tag. `async` is supported. May be used to save tagged option to the server. | | **tag-keys** | `[]` | Array(int) |

Key codes that will trigger tagging. Enter key is always a tagging key and should not be listed!

Example:

:tag-keys="\[9, 32, 188]" - use Tab, Spacebar and "," as tag separators

| | **tags** | | Array([VSelectOption](/vue-select/vselectoption.md)) | Use with `sync` modifier. A **readonly** list of [VSelectOption](/vue-select/vselectoption.md)s that corresponds to the current selected value. Useful when the value is set to a property of the option but you also need access to the whole option object. | | **multiple** | *auto* | Boolean | Force enable / disable multiple selection. By default it's true when `v-model` is an array. | | **debounce** | 250 | Number | Time in milliseconds to wait after typing before executing the fetching function for dynamic lists. | | **closeOnSelect** | *auto* | Boolean | | | **clearOnSelect** | *auto* | Boolean | | | **clearOnClose** | *auto* | Boolean | | | **find** | | Function/false | Function that receives and array of incomplete vSelectOptions and should return an array of options that can be used to complete them. The default function simply uses the `:from` prop. |