@webitel/ui

Appearance

WtSingleSelect ​

Specs ​

Props

Name Required Types Default Description Example Deprecated
label string -
placeholder string -
required boolean -
disabled boolean -
size union -
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
labelProps object () => ({})
v VuelidateFieldLike -
regleValidation SuperCompatibleRegleFieldStatus -
customValidators Array () => []

Events

Name Params Description
reset
hide

Slots

Name Scope Description
label Custom input label
value
option

Primevue docs ​

PrimevueSelect

Example Single Select ​

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-single-select
    v-model="value"
    :options="options"
    label="Single Select"
    option-label="name"
    data-key="language"
  />
</template>

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

Example Single Select (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-single-select
    v-model="value"
    :options="options"
    show-clear
    label="Single Select (empty)"
    option-label="name"
    data-key="language"
  />
</template>

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

Example Single 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(allApiOptions[11]);
</script>

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

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

Example Disabled Single Select ​

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-single-select
    v-model="value"
    :options="options"
    label="Single Select"
    option-label="name"
    data-key="language"
    disabled
  />
  <wt-single-select
    model-value=""
    :options="options"
    label="Single Select (empty)"
    option-label="name"
    data-key="language"
    disabled
  />
</template>

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

Example Disabled Options Single Select ​

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-single-select
    v-model="value"
    :options="options"
    label="Single Select"
    option-label="name"
    data-key="language"
    disabled-options
  />
</template>

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

Example Invalid Single Select ​

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-single-select
    v-model="value"
    :options="options"
    label="Single Select"
    option-label="name"
    data-key="language"
    :v="v$"
  />
  <wt-single-select
    v-model="empty"
    :options="options"
    label="Single Select (empty)"
    option-label="name"
    data-key="language"
    :v="v$"
  />
</template>

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

Example Custom Values Single 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-single-select
      v-model="value"
      :options="options"
      label="Custom Values in Single Select"
      option-label="name"
      data-key="language"
      allow-custom-values
    />
    <pre><code>{{ value }}</code></pre>
  </div>
</template>

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