Select

When there are plenty of options, use a drop-down menu to display and select desired ones.

Tips

This component requires the <client-only></client-only> wrap when used in SSR (eg: Nuxt) and SSG (eg: VitePress).

Basic usage

v-model is the value of el-option that is currently selected.

Viwer Source

<template>
  <FieldSelect :value="value" :optionList="options" size="small" />
  <FieldSelect :value="value" :optionList="options" />
  <FieldSelect :value="value" :optionList="options" size="small" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')

const options = [
  {
    value: 'Option1',
    label: 'Option1',
    disabled: false,
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: false,
  },
  {
    value: 'Option3',
    label: 'Option3',
    disabled: false,
  },
  {
    value: 'Option4',
    label: 'Option4',
    disabled: false,
  },
  {
    value: 'Option5',
    label: 'Option5',
    disabled: false,
  },
]
</script>

Disabled Option

Set the value of disabled in el-option to true to disable this option.

Viwer Source

<template>
  <FieldSelect :value="value" :optionList="options" size="small" />
  <FieldSelect :value="value" :optionList="options" />
  <FieldSelect :value="value" :optionList="options" size="small" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')

const options = [
  {
    value: 'Option1',
    label: 'Option1',
    disabled: false,
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: false,
  },
  {
    value: 'Option3',
    label: 'Option3',
    disabled: false,
  },
  {
    value: 'Option4',
    label: 'Option4',
    disabled: false,
  },
  {
    value: 'Option5',
    label: 'Option5',
    disabled: false,
  },
]
</script>

Disabled Select

Disable the whole component.

Set disabled of el-select to make it disabled.

Viwer Source

<template>
  <FieldSelect :value="value" :optionList="options" :disabled="true" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')

const options = [
  {
    value: 'Option1',
    label: 'Option1',
    disabled: false,
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: true,
  },
  {
    value: 'Option3',
    label: 'Option3',
    disabled: false,
  },
  {
    value: 'Option4',
    label: 'Option4',
    disabled: false,
  },
  {
    value: 'Option5',
    label: 'Option5',
    disabled: false,
  },
]
</script>

Clearable Single Select

You can clear Select using a clear icon.

Set clearable attribute for el-select and a clear icon will appear. Note that clearable is only for single select.

Viwer Source

<template>
  <FieldSelect :value="value" :optionList="options" :clearable="true" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')

const options = [
  {
    value: 'Option1',
    label: 'Option1',
    disabled: false,
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: true,
  },
  {
    value: 'Option3',
    label: 'Option3',
    disabled: false,
  },
  {
    value: 'Option4',
    label: 'Option4',
    disabled: false,
  },
  {
    value: 'Option5',
    label: 'Option5',
    disabled: false,
  },
]
</script>

Basic Multiple Select

Multiple select uses tags to display selected options.

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. By default the selected options will be displayed as Tags. You can collapse them to a text by using collapse-tags attribute. You can check them when mouse hover collapse text by using collapse-tags-tooltip attribute.

default

use collapse-tags

use collapse-tags-tooltip

use max-collapse-tags

Viwer Source

<template>
  <p>default</p>
  <FieldSelect :value="value1" :optionList="options" :multiple="true" />
  <p>use collapse-tags</p>
  <FieldSelect :value="value2" :optionList="options" :multiple="true" :collapseTags="true" />
  <p>default</p>
  <FieldSelect :value="value3" :optionList="options" :multiple="true" :collapseTags="true" :collapseTagsTooltip="true" />
  <p>default</p>
  <FieldSelect :value="value4" :optionList="options" :multiple="true" :collapseTags="true" :collapseTagsTooltip="true" :multipleLimit="3" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref([])
const value2 = ref([])
const value3 = ref([])
const value4 = ref([])

const options = [
  {
    value: 'Option1',
    label: 'Option1',
    disabled: false,
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: true,
  },
  {
    value: 'Option3',
    label: 'Option3',
    disabled: false,
  },
  {
    value: 'Option4',
    label: 'Option4',
    disabled: false,
  },
  {
    value: 'Option5',
    label: 'Option5',
    disabled: false,
  },
]
</script>

Option filtering

You can filter options for your desired ones.

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 changes, and its parameter is the current input value.

Viwer Source

<template>
  <FieldSelect :value="value" :optionList="options" :filterable="true" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')

const options = [
  {
    value: 'Option1',
    label: 'Option1',
    disabled: false,
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: true,
  },
  {
    value: 'Option3',
    label: 'Option3',
    disabled: false,
  },
  {
    value: 'Option4',
    label: 'Option4',
    disabled: false,
  },
  {
    value: 'Option5',
    label: 'Option5',
    disabled: false,
  },
]
</script>

Props

Name	Description	Type	Mandatory
value	binding value	String	True
optionList	List of Options that must be displayed in the Select. Within the array of options, the attributes to be received and required are: { label: title, value: value, disabled: false rue }	array	True

Attributes

Name	Description	Type	Default
multiple	whether multiple-select is activated	Boolean	False
collapseTags	whether to collapse tags to a text when multiple selecting	Boolean	False
collapseTagsTooltip	whether show all selected tags when mouse hover text of collapse-tags. To use this, collapse-tags must be true	Boolean	False
multipleLimit	maximum number of options user can select when multiple is true. No limit when set to 0	number	0
disabled	whether Switch is disabled	Boolean	False
clearable	whether select can be cleared	Boolean	False
size	size of Switch large / default / small	String	default
placeholder	placeholder the Select	String	Select
filterable	whether Select is filterable	Boolean	False
allowCreate	whether creating new items is allowed. To use this, filterable must be true	Boolean	False
noDataText	displayed text when there is no options, you can also use slot empty	String	No data

Slots

Name	Description
header	Customize Default Content Top
footer	Customize Default Content Bottom

Example for Developer

Directory

  └─ src                                            # Main source code.
      └── Components                                # Global components
              └── Atoms                             # Atom components
                  └── FieldSelect                   # Field Select specific components.