## Select When there are too many options, use the drop-down menu to display and select the content. ### How to use Basic radio that can be used in many scenarios. :::demo The value of `v-model` is the value attribute of `el-option` that is currently selected. ```html ``` ::: ### With disabled options :::demo Setting the value of `disabled` in `el-option` to true to disable this option. ```html ``` ::: ### Disabled state The disabled state of select component. :::demo Set `disabled` attribute for `el-select` to set it disabled. ```html ``` ::: ### With radio that can reset the select With reset radio, you can reset the select component to default state. :::demo Setting `clearable` attribute for `el-select` can reset the select component. What you should notice is that `clearable` attribute is only for radio select component. ```html ``` ::: ### Basic checkbox Basic checkbox can be used in many scenarios, which uses Tag to show the selected option. :::demo Set `multiple` attribute for `el-select` to enable checkbox mode, and then the value of `v-model` is the array of selected options. ```html ``` ::: ### Custom templates You can customize the alternative options. :::demo Insert the customized HTML templates into the slot of `el-option`. ```html ``` ::: ### Grouping Display the alternatives in a grouping manner. :::demo Use `el-option-group` to group the alternatives, its `label` attribute stands for the name of the group. ```html ``` ::: ### Searchable You can use the search function to find options quickly. :::demo Add `filterable` attribute for `el-select` to enable search function. By default, select will find all the options whose `label` attribute contains the input value. If you want to use other search logic, you can pass the `filter-method`. `filter-method` is a `Function` that will be called when the input value changed, and its parameter is the current input value. ```html ``` ::: ### Remote Search Search the data from the server, and enter the keyword to find. :::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 will be called when the input value changed, and its parameter is the current input value. What you should notice is that if `el-option` is rendered by the `v-for` directive, and you should add `key` attribute for `el-option`. Its value needs to be unique, such as `item.value` in the following example. ```html ``` ::: ### Select Attributes | Attribute | Description | Type | Options | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | multiple | Whether in checkbox mode | boolean | — | false | | disabled | Whether disabled or not | boolean | — | false | | clearable | Whether the Options can be cleared when single selected | boolean | — | false | | name | the name attribute of select input | string | — | — | | placeholder | placeholder | string | — | Please make a choice | | filterable | Whether searchable | boolean | — | false | | filter-method | customized filter method | function | — | — | | remote | Whether remote search | boolean | — | false | | remote-method | the method for remote search | function | — | — | | loading | Whether loading from the remote server | boolean | — | false | ### Select Events | Event name | Description | Call back Params | |---------|---------|---------| | change | Trigged when the selected value changes | current selected value | ### Option Group Attributes | Attribute | Description | Type | Options | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | label | The name of the group | string | — | — | | disabled | Whether to disable all the Options in this group | boolean | — | false | ### Option Attributes | Attribute | Description | Type | Options | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | value | the value of Option | string/number/object | — | — | | label | the label of Option, by default is the same as `value` | string/number | — | — | | disabled | Whether to disable the Option or not | boolean | — | false |