Select

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

Basic Usage

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

Disabled Option

Set disabled of tu-select to make it disabled.

Multiple Select

By setting multiple, the selector can support multiple selection. In addition, the maximum number of tags displayed can be set by max-tag-count.

Please select

<template>
  <tu-row :gutter="20">
    <tu-col :span="12">
      <tu-select placeholder="Please select" v-model="value1" multiple>
        <tu-select-option>Option 1</tu-select-option>
        <tu-select-option>Option 2</tu-select-option>
        <tu-select-option>Option 3</tu-select-option>
        <tu-select-option>Option 4</tu-select-option>
        <tu-select-option>Option 5</tu-select-option>
        <tu-select-option>Option 6</tu-select-option>
      </tu-select>
    </tu-col>
    <tu-col :span="12">
      <tu-select
        placeholder="Please select"
        v-model="value2"
        multiple
        :max-tag-count="2"
      >
        <tu-select-option>Option 1</tu-select-option>
        <tu-select-option>Option 2</tu-select-option>
        <tu-select-option>Option 3</tu-select-option>
        <tu-select-option>Option 4</tu-select-option>
        <tu-select-option>Option 5</tu-select-option>
        <tu-select-option>Option 6</tu-select-option>
      </tu-select>
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref([]);
const value2 = ref([]);
</script>

<template>
  <tu-row :gutter="20">
    <tu-col :span="12">
      <tu-select placeholder="Please select" v-model="value1" multiple>
        <tu-select-option>Option 1</tu-select-option>
        <tu-select-option>Option 2</tu-select-option>
        <tu-select-option>Option 3</tu-select-option>
        <tu-select-option>Option 4</tu-select-option>
        <tu-select-option>Option 5</tu-select-option>
        <tu-select-option>Option 6</tu-select-option>
      </tu-select>
    </tu-col>
    <tu-col :span="12">
      <tu-select
        placeholder="Please select"
        v-model="value2"
        multiple
        :max-tag-count="2"
      >
        <tu-select-option>Option 1</tu-select-option>
        <tu-select-option>Option 2</tu-select-option>
        <tu-select-option>Option 3</tu-select-option>
        <tu-select-option>Option 4</tu-select-option>
        <tu-select-option>Option 5</tu-select-option>
        <tu-select-option>Option 6</tu-select-option>
      </tu-select>
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref([]);
const value2 = ref([]);
</script>

Allow Clear

By setting allow-clear, the clear button is displayed.

Please select

Loading

Select boxes and drop-down menus show loading status.

custom dropdown menu header.

Please select

<template>
  <tu-select placeholder="Please select" v-model="value" multiple allow-clear>
    <template #header>
      <div style="padding: 6px 12px">
        <tu-checkbox
          v-model="checkAll"
          :indeterminate="indeterminate"
          @change="handleCheckAll"
        >
          Check All
        </tu-checkbox>
      </div>
    </template>
    <tu-select-option v-for="option in options" :key="option">
      {{ option }}
    </tu-select-option>
  </tu-select>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';

const options = Array(8)
  .fill(null)
  .map((_, index) => `Option  ${index + 1}`);

const checkAll = ref(false);
const indeterminate = ref(false);
const value = ref<string[]>([]);

watch(value, (val) => {
  if (val.length === 0) {
    checkAll.value = false;
    indeterminate.value = false;
  } else if (val.length === options.length) {
    checkAll.value = true;
    indeterminate.value = false;
  } else {
    indeterminate.value = true;
  }
});

const handleCheckAll = (val: Boolean) => {
  indeterminate.value = false;
  value.value = val ? options : [];
};
</script>

<template>
  <tu-select placeholder="Please select" v-model="value" multiple allow-clear>
    <template #header>
      <div style="padding: 6px 12px">
        <tu-checkbox
          v-model="checkAll"
          :indeterminate="indeterminate"
          @change="handleCheckAll"
        >
          Check All
        </tu-checkbox>
      </div>
    </template>
    <tu-select-option v-for="option in options" :key="option">
      {{ option }}
    </tu-select-option>
  </tu-select>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';

const options = Array(8)
  .fill(null)
  .map((_, index) => `Option  ${index + 1}`);

const checkAll = ref(false);
const indeterminate = ref(false);
const value = ref<string[]>([]);

watch(value, (val) => {
  if (val.length === 0) {
    checkAll.value = false;
    indeterminate.value = false;
  } else if (val.length === options.length) {
    checkAll.value = true;
    indeterminate.value = false;
  } else {
    indeterminate.value = true;
  }
});

const handleCheckAll = (val: Boolean) => {
  indeterminate.value = false;
  value.value = val ? options : [];
};
</script>

custom dropdown menu footer.

Allow Create

By setting allow-create, the selector can create items that do not exist in the options.

Please select

Allow Search

By setting allow-search, you can make the selector support searching for options, and you can customize the search with filter-option.

<template>
  <tu-row :gutter="20">
    <tu-col :span="8">
      <tu-select
        placeholder="Please select"
        v-model="value1"
        allow-clear
        allow-search
      >
        <tu-select-option>Option 1</tu-select-option>
        <tu-select-option>Option 2</tu-select-option>
        <tu-select-option>Option 3</tu-select-option>
        <tu-select-option>Option 4</tu-select-option>
        <tu-select-option>Option 5</tu-select-option>
        <tu-select-option>Option 6</tu-select-option>
      </tu-select>
    </tu-col>
    <tu-col :span="8">
      <tu-select
        placeholder="Please select"
        v-model="value2"
        allow-clear
        :allow-search="{ retainInputValue: true }"
      >
        <tu-select-option>Option 1</tu-select-option>
        <tu-select-option>Option 2</tu-select-option>
        <tu-select-option>Option 3</tu-select-option>
        <tu-select-option>Option 4</tu-select-option>
        <tu-select-option>Option 5</tu-select-option>
        <tu-select-option>Option 6</tu-select-option>
      </tu-select>
    </tu-col>
    <tu-col :span="8">
      <tu-select
        placeholder="Please select"
        v-model="value3"
        allow-clear
        allow-search
        :options="options"
        :loading="loading"
        @search="handleSearch"
      >
      </tu-select>
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const options = ref([
  'Option 1',
  'Option 2',
  'Option 3',
  'Option 4',
  'Option 5',
  'Option 6'
]);
const loading = ref(false);

const value1 = ref('');
const value2 = ref('');
const value3 = ref('');

const handleSearch = (val: string) => {
  if (val) {
    loading.value = true;
    setTimeout(() => {
      options.value = [`Option 1(${val})`, `Option 2(${val})`];
      loading.value = false;
    }, 1500);
  } else {
    options.value = [];
  }
};
</script>

<template>
  <tu-row :gutter="20">
    <tu-col :span="8">
      <tu-select
        placeholder="Please select"
        v-model="value1"
        allow-clear
        allow-search
      >
        <tu-select-option>Option 1</tu-select-option>
        <tu-select-option>Option 2</tu-select-option>
        <tu-select-option>Option 3</tu-select-option>
        <tu-select-option>Option 4</tu-select-option>
        <tu-select-option>Option 5</tu-select-option>
        <tu-select-option>Option 6</tu-select-option>
      </tu-select>
    </tu-col>
    <tu-col :span="8">
      <tu-select
        placeholder="Please select"
        v-model="value2"
        allow-clear
        :allow-search="{ retainInputValue: true }"
      >
        <tu-select-option>Option 1</tu-select-option>
        <tu-select-option>Option 2</tu-select-option>
        <tu-select-option>Option 3</tu-select-option>
        <tu-select-option>Option 4</tu-select-option>
        <tu-select-option>Option 5</tu-select-option>
        <tu-select-option>Option 6</tu-select-option>
      </tu-select>
    </tu-col>
    <tu-col :span="8">
      <tu-select
        placeholder="Please select"
        v-model="value3"
        allow-clear
        allow-search
        :options="options"
        :loading="loading"
        @search="handleSearch"
      >
      </tu-select>
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const options = ref([
  'Option 1',
  'Option 2',
  'Option 3',
  'Option 4',
  'Option 5',
  'Option 6'
]);
const loading = ref(false);

const value1 = ref('');
const value2 = ref('');
const value3 = ref('');

const handleSearch = (val: string) => {
  if (val) {
    loading.value = true;
    setTimeout(() => {
      options.value = [`Option 1(${val})`, `Option 2(${val})`];
      loading.value = false;
    }, 1500);
  } else {
    options.value = [];
  }
};
</script>

By setting monitor the scroll event of the drop-down menu through dropdown-scroll. Or use dropdown-reach-bottom to monitor the event of the drop-down menu scrolling to the bottom.

Remote Search

Use the search event to search remotely and change options.

Group

Use the tu-select-group component to add grouping options.

Please select

<template>
  <tu-row :gutter="20">
    <tu-col :span="12">
      <tu-select placeholder="Please select" v-model="value1">
        <tu-select-group label="Title 1">
          <tu-select-option>Option1</tu-select-option>
          <tu-select-option>Option2</tu-select-option>
        </tu-select-group>
        <tu-select-group label="Title 2">
          <tu-select-option>Option3</tu-select-option>
          <tu-select-option>Option4</tu-select-option>
          <tu-select-option>Option5</tu-select-option>
          <tu-select-option>Option6</tu-select-option>
        </tu-select-group>
      </tu-select>
    </tu-col>
    <tu-col :span="12">
      <tu-select placeholder="Please select" v-model="value2" multiple>
        <tu-select-group label="Title 1">
          <tu-select-option>Option1</tu-select-option>
          <tu-select-option>Option2</tu-select-option>
        </tu-select-group>
        <tu-select-group label="Title 2">
          <tu-select-option>Option3</tu-select-option>
          <tu-select-option>Option4</tu-select-option>
          <tu-select-option>Option5</tu-select-option>
          <tu-select-option>Option6</tu-select-option>
        </tu-select-group>
      </tu-select>
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref('');
const value2 = ref('');
</script>

<template>
  <tu-row :gutter="20">
    <tu-col :span="12">
      <tu-select placeholder="Please select" v-model="value1">
        <tu-select-group label="Title 1">
          <tu-select-option>Option1</tu-select-option>
          <tu-select-option>Option2</tu-select-option>
        </tu-select-group>
        <tu-select-group label="Title 2">
          <tu-select-option>Option3</tu-select-option>
          <tu-select-option>Option4</tu-select-option>
          <tu-select-option>Option5</tu-select-option>
          <tu-select-option>Option6</tu-select-option>
        </tu-select-group>
      </tu-select>
    </tu-col>
    <tu-col :span="12">
      <tu-select placeholder="Please select" v-model="value2" multiple>
        <tu-select-group label="Title 1">
          <tu-select-option>Option1</tu-select-option>
          <tu-select-option>Option2</tu-select-option>
        </tu-select-group>
        <tu-select-group label="Title 2">
          <tu-select-option>Option3</tu-select-option>
          <tu-select-option>Option4</tu-select-option>
          <tu-select-option>Option5</tu-select-option>
          <tu-select-option>Option6</tu-select-option>
        </tu-select-group>
      </tu-select>
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref('');
const value2 = ref('');
</script>

Custom Label

The display content of the select box can be customized through the #label slot.

Linkage Select

Show how to realize the linkage selection box.

Option 1-1

Custom Field Names

The format of the data in options can be customized through the field-names attribute.

Option1

Virtual List

How to use the virtual list.

Sizes

Besides default size, tu-select component provides three additional sizes for you to choose among different scenarios. Use attribute size to set additional sizes with mini, small, large.

MiniSmallMediumLarge

Please select

<template>
  <tu-radio-group class="mb-2" v-model="size" type="button">
    <tu-radio label="mini">Mini</tu-radio>
    <tu-radio label="small">Small</tu-radio>
    <tu-radio label="medium">Medium</tu-radio>
    <tu-radio label="large">Large</tu-radio>
  </tu-radio-group>

  <tu-row :gutter="20" class="demo-select-row mb-2">
    <tu-col :span="12">
      <tu-select
        placeholder="Please select"
        allow-clear
        v-model="value1"
        :size="size"
        :options="options"
      />
    </tu-col>
    <tu-col :span="12">
      <tu-select
        placeholder="Please select"
        multiple
        allow-clear
        v-model="value2"
        :size="size"
        :options="options"
      />
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const options = Array(8)
  .fill(null)
  .map((_, index) => `Option  ${index + 1}`);

const value1 = ref('');
const value2 = ref('');

const size = ref('medium');
</script>

<style>
.demo-select-row {
  align-items: baseline;
}
</style>

<template>
  <tu-radio-group class="mb-2" v-model="size" type="button">
    <tu-radio label="mini">Mini</tu-radio>
    <tu-radio label="small">Small</tu-radio>
    <tu-radio label="medium">Medium</tu-radio>
    <tu-radio label="large">Large</tu-radio>
  </tu-radio-group>

  <tu-row :gutter="20" class="demo-select-row mb-2">
    <tu-col :span="12">
      <tu-select
        placeholder="Please select"
        allow-clear
        v-model="value1"
        :size="size"
        :options="options"
      />
    </tu-col>
    <tu-col :span="12">
      <tu-select
        placeholder="Please select"
        multiple
        allow-clear
        v-model="value2"
        :size="size"
        :options="options"
      />
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const options = Array(8)
  .fill(null)
  .map((_, index) => `Option  ${index + 1}`);

const value1 = ref('');
const value2 = ref('');

const size = ref('medium');
</script>

<style>
.demo-select-row {
  align-items: baseline;
}
</style>

Select API

Select Attributes

Name	Description	Type	Default
multiple	Whether to open multi-select mode (The search is turned on by default in the multi-select mode)）	`Boolean`	false
model-value/v-model	Value	`String` `Number` `Boolean` `Object`	-
default-value	Default value (uncontrolled mode)	`String` `Number` `Boolean` `Object`	-
input-value	The value of the input	`String`	-
default-input-value	The default value of the input (uncontrolled mode)	`String`	''
size	The size of the select	`String`	medium
placeholder	Placeholder	`String`	-
loading	Whether it is loading state	`Boolean`	false
disabled	Whether to disable	`Boolean`	false
allow-clear	Whether to allow clear	`Boolean`	false
allow-search	Whether to allow search	`Boolean` `Object`	false (single) \| true (multiple)
allow-create	Whether to allow creation	`Boolean`	false
max-tag-count	In multi-select mode, the maximum number of labels displayed. 0 means unlimited	`Number`	0
popup-container	Mount container for popup	`String` `HTMLElement`	-
default-active-first-option	Whether to select the first option by default when there is no value	`Boolean`	true
popup-visible	Whether to show the dropdown	`Boolean`	-
default-popup-visible	Whether the popup is visible by default (uncontrolled mode)	`Boolean`	false
unmount-on-close	Whether to destroy the element when the dropdown is closed	`Boolean`	false
filter-option	Whether to filter options	`Boolean` `Function`	true
options	Option data	`Array`	[]
virtual-list-props	Pass the virtual list attribute, pass in this parameter to turn on virtual scrolling VirtualListProps	`VirtualListProps`	-
trigger-props	Trigger props of the drop-down menu	`TriggerProps`	-
format-label	Format display content	`Function`	-
show-extra-options	Options that do not exist in custom values	`Boolean`	true
value-key	Used to determine the option key value attribute name	`String`	value
search-delay	Delay time to trigger search event	`Number`	500
limit	Maximum number of choices in multiple choice	`Number`	0
field-names	Customize fields in SelectOptionData	`SelectFieldNames`	-
scrollbar	Whether to enable virtual scroll bar	`Boolean` `ScrollbarProps`	true
show-header-on-empty	Whether to display the header in the empty state	`boolean`	false
show-footer-on-empty	Whether to display the footer in the empty state	`boolean`	false

Select Events

Name	Description	Type
change	Triggered when the value changes	`Function`
input-value-change	Triggered when the value of the input changes	`Function`
popup-visible-change	Triggered when the display state of the drop-down box changes	`Function`
clear	Triggered when the clear button is clicked	-
remove	Triggered when the delete button of the label is clicked	`Function`
search	Triggered when the user searches	`Function`
dropdown-scroll	Triggered when the drop-down scrolls	-
dropdown-reach-bottom	Triggered when the drop-down menu is scrolled to the bottom	-
exceed-limit	Triggered when multiple selection exceeds the limit	`Function`

Select Slots

Name	Description	Type
trigger	Custom trigger element	-
prefix	Prefix	-
search-icon	Search icon for select box	-
loading-icon	Loading icon for select box	-
arrow-icon	Arrow icon for select box	-
footer	The footer of the drop-down box	-
header	The header of the drop-down box	-
label	Display content of label	data: `SelectOptionData`
option	Display content of options	data: `SelectOptionData`
empty	Display content when the option is empty	-

Select Option Attributes

Name	Description	Type	Default
value	Option value (if not filled, it will be obtained from the content)	`StringNumberBooleanObject`	-
label	Option label (if not filled, it will be obtained from the content)	`String`	-
disabled	Whether to disable	`Boolean`	false
tag-props	Displayed tag attributes	`TagProps`	-
extra	Extra data	`Object`	-
index	Index for manually specifying option	`Number`	-

Select Group Attributes

Name	Description	Type	Default
label	Title of option group	`string`	-

Select Group Slots

Name	Description	Type
label	Title of option group	-

Type

type Option = string | number | SelectOptionData | SelectOptionGroup;

type FilterOption = boolean | ((inputValue: string, option: SelectOptionData) => boolean);

type Option = string | number | SelectOptionData | SelectOptionGroup;

type FilterOption = boolean | ((inputValue: string, option: SelectOptionData) => boolean);

SelectOptionData

Name	Description	Type	Default
value	Option Value	`StringNumberBooleanRecord`	-
label	Option content	`String`	-
disabled	Whether to disable	`Boolean`	false
tagProps	Props of the multi-select label corresponding to the option	`any`	-
render	Custom render	`RenderFunction`	-

SelectOptionGroup

Name	Description	Type	Default
isGroup	Whether it is an option group	`Boolean`	-
label	Option group title	`String`	-
options	Options in the option group	`Array`	-

VirtualListProps

Name	Description	Type	Default
height	Viewable area height	`StringNumber`	-
threshold	The threshold of the number of elements to enable virtual scrolling. When the number of data is less than the threshold, virtual scrolling will not be enabled.	`Number`	-
fixedSize	Is the element height fixed.	`Boolean`	false
estimatedSize	Is the element height fixed.	`Number`	-
buffer	The number of elements mounted in advance outside the boundary of the viewport.	`Number`	10

FAQ

Use Object format as option value

When using the Object format as the value of the option, you need to specify the field name to obtain the unique identifier for the selector through the value-key attribute, and the default value is value. In addition, the object value of value needs to be defined in setup, and the object cannot be created in the template, which will lead to repeated rendering of the Option component.

For example, when I need to specify key as a unique identifier:

vue

<template>
  <tu-select v-model="value" placeholder="Please select" value-key="key">
    <tu-select-option v-for="item of data" :value="item" :label="item.label" />
  </tu-select>
</template>

<script setup>
import { ref } from 'vue';

const value = ref();
const options = [
  {
    value: 'option1',
    label: 'option1',
    key: 'extra1'
  },
  {
    value: 'option2',
    label: 'option2',
    key: 'extra3'
  },
  {
    value: 'option3',
    label: 'option3',
    key: 'extra3'
  },
]
</script>

<template>
  <tu-select v-model="value" placeholder="Please select" value-key="key">
    <tu-select-option v-for="item of data" :value="item" :label="item.label" />
  </tu-select>
</template>

<script setup>
import { ref } from 'vue';

const value = ref();
const options = [
  {
    value: 'option1',
    label: 'option1',
    key: 'extra1'
  },
  {
    value: 'option2',
    label: 'option2',
    key: 'extra3'
  },
  {
    value: 'option3',
    label: 'option3',
    key: 'extra3'
  },
]
</script>

The Select component does not enable the container scrolling event monitoring function by default. If you encounter the problem of separating the drop-down menu in the scrolling container, you can manually enable the updateAtScroll function of the internal Trigger component.

If this is the case in the global environment, you can use the ConfigProvider component to enable this property by default.

vue

<tu-select :trigger-props="{updateAtScroll:true}"></tu-select>

<tu-select :trigger-props="{updateAtScroll:true}"></tu-select>

Select ​

Basic Usage ​

Disabled Option ​

Multiple Select ​

Allow Clear ​

Loading ​

Dropdown Header ​

Dropdown Footer ​

Allow Create ​

Allow Search ​

Dropdown Scroll ​

Remote Search ​

Group ​

Custom Label ​

Linkage Select ​

Custom Field Names ​

Virtual List ​

Sizes ​

Select API ​

Select Attributes ​

Select Events ​

Select Slots ​

Select Option Attributes ​

Select Group Attributes ​

Select Group Slots ​

Type ​

SelectOptionData ​

SelectOptionGroup ​

VirtualListProps ​

FAQ ​

Use Object format as option value ​

Dropdown menu separation issue in scroll container ​

Select

Basic Usage

Disabled Option

Multiple Select

Allow Clear

Loading

Dropdown Header

Dropdown Footer

Allow Create

Allow Search

Dropdown Scroll

Remote Search

Group

Custom Label

Linkage Select

Custom Field Names

Virtual List

Sizes

Select API

Select Attributes

Select Events

Select Slots

Select Option Attributes

Select Group Attributes

Select Group Slots

Type

SelectOptionData

SelectOptionGroup

VirtualListProps

FAQ

Use Object format as option value

Dropdown menu separation issue in scroll container