## Select When there are plenty of options, use a drop-down menu to display and select desired ones. ### Basic usage :::demo `v-model` is the value of `el-option` that is currently selected. ```html ``` ::: ### Disabled option :::demo Set the value of `disabled` in `el-option` to `true` to disable this option. ```html ``` ::: ### Disabled select Disable the whole component. :::demo Set `disabled` of `el-select` to make it disabled. ```html ``` ::: ### Clearable single select You can clear Select using a clear icon. :::demo Set `clearable` attribute for `el-select` and a clear icon will appear. Note that `clearable` is only for single select. ```html ``` ::: ### Basic multiple select Multiple select uses tags to display selected options. :::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options. ```html ``` ::: ### Custom template You can customize HTML templates for options. :::demo Insert customized HTML templates into the slot of `el-option`. ```html ``` ::: ### Grouping Display options in groups. :::demo Use `el-option-group` to group the options, and its `label` attribute stands for the name of the group. ```html ``` ::: ### Option filtering You can filter options for your desired ones. :::demo Adding `filterable` to `el-select` enables filtering. By default, Select will find all the options whose `label` attribute contains the input value. If you prefer other filtering strategies, you can pass the `filter-method`. `filter-method` is a `Function` that gets called when the input value changed, and its parameter is the current input value. ```html ``` ::: ### Remote Search Enter keywords and search data from server. :::demo Set the value of `filterable` and `remote` with `true` to enable remote search, and you should pass the `remote-method`. `remote-method` is a `Function` that gets called when the input value changes, and its parameter is the current input value. Note that if `el-option` is rendered with the `v-for` directive, you should add the `key` attribute for `el-option`. Its value needs to be unique, such as `item.value` in the following example. ```html ``` ::: ### Create new items Create and select new items that are not included in select options :::demo By using the `allow-create` attribute, users can create new items by typing in the input box. Note that for `allow-create` to work, `filterable` must be `true`. ```html ``` ::: ### Select Attributes | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | multiple | whether multiple-select is activated | boolean | — | false | | disabled | whether Select is disabled | boolean | — | false | | size | size of Input | string | large/small/mini | — | | clearable | whether single select can be cleared | boolean | — | false | | multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 | | name | the name attribute of select input | string | — | — | | placeholder | placeholder | string | — | Select | | filterable | whether Select is filterable | boolean | — | false | | allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false | | filter-method | custom filter method | function | — | — | | remote | whether options are loaded from server | boolean | — | false | | remote-method | custom remote search method | function | — | — | | loading | whether Select is loading data from server | boolean | — | false | ### Select Events | Event Name | Description | Parameters | |---------|---------|---------| | change | triggers when the selected value changes | current selected value | ### Option Group Attributes | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | label | name of the group | string | — | — | | disabled | whether to disable all options in this group | boolean | — | false | ### Option Attributes | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | value | value of option | string/number/object | — | — | | label | label of option, same as `value` if omitted | string/number | — | — | | disabled | whether option is disabled | boolean | — | false |