@webitel/ui

Appearance

WtMultiSelect ​

Specs ​

Props

Name Required Types Default Description Example Deprecated
label string -
placeholder string -
required boolean -
disabled boolean -
disabledOptions boolean - true disables all options but keeps dropdown visible
strictApiOptions boolean - true — the select will only show options returned by the API, never prepending the current model value if it is missing from the list
filterable boolean true false disables options search
showClear boolean true true shows the clear button
options TSTypeOperator () => [] readonly so consumers can pass as const option lists
optionLabel string 'label'
optionValue string -
dataKey string 'id' A property to uniquely identify an option.
searchMethod SelectSearchMethod - Function that returns filtered options for server-side search
allowCustomValues boolean - true allows adding custom values through the filter input
manualCustomValues boolean - true emits custom values through the filter input instead of adding them automatically
chipsView boolean -
labelProps object () => ({})
v VuelidateFieldLike -
regleValidation SuperCompatibleRegleFieldStatus -
customValidators Array () => []

Events

Name Params Description
add:custom-value
reset
hide

Slots

Name Scope Description
label Custom input label

Primevue docs ​

PrimevueMultiSelect

Example Multi Select ​

Vue.js
Code
vue
<script setup>
import { ref } from 'vue';

import { frameworkOptions as options } from '../_internals/select-example-options.js';

const value = ref([
	options[0],
]);
</script>

<template>
  <wt-multi-select
    v-model="value"
    :options="options"
    label="Multi Select"
    option-label="name"
    data-key="language"
  />
</template>

<style scoped lang="scss"></style>

Example Multi Select (Chip display) ​

Vue.js
Adonis
Code
vue
<script setup>
import { ref } from 'vue';

import { frameworkOptions as options } from '../_internals/select-example-options.js';

const value = ref([
	options[0],
	options[1],
]);
</script>

<template>
  <wt-multi-select
    v-model="value"
    :options="options"
    label="Multi Select (chip display)"
    option-label="name"
    data-key="language"
    chips-view
  />
</template>

<style scoped lang="scss"></style>

Example Multi Select (Clear) ​

Multi Select (with clear) 
Code
vue
<script setup>
import { ref } from 'vue';

import { frameworkOptions as options } from '../_internals/select-example-options.js';

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

<template>
  <wt-multi-select
    v-model="value"
    :options="options"
    show-clear
    label="Multi Select (with clear)"
    option-label="name"
    data-key="language"
  />
</template>

<style scoped lang="scss"></style>

Example Multi Select (API) ​

Multi Select (API) 
Code
vue
<script setup>
import { ref } from 'vue';

import { allApiOptions } from '../_internals/select-example-options.js';

const PAGE_SIZE = 10;

const searchMethod = async ({ search, page }) => {
	// simulate network delay
	await new Promise((resolve) => setTimeout(resolve, 2000));

	const filtered = allApiOptions.filter(({ name }) =>
		name.toLowerCase().includes(search.toLowerCase()),
	);

	const offset = (page - 1) * PAGE_SIZE;
	const items = filtered.slice(offset, offset + PAGE_SIZE);
	const next = offset + PAGE_SIZE < filtered.length;

	return {
		items,
		next,
	};
};

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

<template>
  <wt-multi-select
    v-model="value"
    :search-method="searchMethod"
    label="Multi Select (API)"
    option-label="name"
		data-key="language"
  />
</template>

<style scoped lang="scss"></style>

Example Disabled Multi Select ​

Vue.js, Adonis
Multi Select (empty) 
Code
vue
<script setup>
import { ref } from 'vue';

import { frameworkOptions as options } from '../_internals/select-example-options.js';

const value = ref([
	options[0],
	options[1],
]);
</script>

<template>
  <wt-multi-select
    v-model="value"
    :options="options"
    label="Multi Select"
    option-label="name"
    data-key="language"
    disabled
  />
  <wt-multi-select
    :model-value="[]"
    :options="options"
    label="Multi Select (empty)"
    option-label="name"
    data-key="language"
    disabled
  />
</template>

<style scoped lang="scss"></style>

Example Disabled Options Multi Select ​

Vue.js
Code
vue
<script setup>
import { ref } from 'vue';

import { frameworkOptions as options } from '../_internals/select-example-options.js';

const value = ref([
	options[0],
]);
</script>

<template>
  <wt-multi-select
    v-model="value"
    :options="options"
    label="Multi Select"
    option-label="name"
    data-key="language"
    disabled-options
  />
</template>

<style scoped lang="scss"></style>

Example Invalid Multi Select ​

Vue.js
Multi Select (empty) 
Code
vue
<script setup>
import { useVuelidate } from '@vuelidate/core';
import { computed, ref } from 'vue';

import { frameworkOptions as options } from '../_internals/select-example-options.js';

const value = ref([
	options[0],
]);
const empty = ref([]);

const v$ = useVuelidate(
	computed(() => ({
		value: {
			required: () => false,
		},
	})),
	{
		value,
	},
);

v$.value.$touch();
</script>

<template>
  <wt-multi-select
    v-model="value"
    :options="options"
    label="Multi Select"
    option-label="name"
    data-key="language"
    :v="v$"
  />
  <wt-multi-select
    v-model="empty"
    :options="options"
    label="Multi Select (empty)"
    option-label="name"
    data-key="language"
    :v="v$"
  />
</template>

<style scoped lang="scss"></style>

Example Custom Values Multi Select ​

Custom Values in Multi Select
[]
Code
vue
<script setup>
import { ref } from 'vue';

import { frameworkOptions as options } from '../_internals/select-example-options.js';

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

<template>
  <div>
    <wt-multi-select
      v-model="value"
      :options="options"
      label="Custom Values in Multi Select"
      option-label="name"
      data-key="language"
      allow-custom-values
      chips-view
    />
    <pre><code>{{ value }}</code></pre>
  </div>
</template>

<style scoped lang="scss"></style>