Для двух-трёх вариантов возьмите CdsRadioGroup — опции видны сразу. Если список длинный и пользователь ищет вводом текста, подойдёт CdsAutocomplete, а если допускаются значения вне списка — CdsCombobox.

Анатомия

Первая схема — каркас компонента: лейбл, описание, поле и блок сообщений. Вторая — устройство самого поля: зона выбранных значений, кнопка очистки и индикатор меню; внутренние и внешние зоны иконок — те же, что у CdsTextInput.

Storybook

Вариации

Элементы списка

Список задаёт проп items — массив строк или объектов с тем же интерфейсом, что у CdsList. Пока значение не выбрано, поле показывает placeholder.

Sandbox Storybook

<script setup lang="ts">
import { CdsSelect } from '@central-design-system/components';
import { ref } from 'vue';

const items = ['Первый', 'Второй', 'Третий', 'Четвёртый'];

const selected = ref(null);
</script>

<template>
  <div class="w-[350px] m-auto">
    <CdsSelect
      v-model="selected"
      :items="items"
      label="Выберите значение"
      placeholder="Выбрать значение"
      description="Вспомогательное описание для выбора из списка"
    />
  </div>
</template>

Свои поля данных

Когда объекты приходят с сервера как есть, укажите через item-title и item-value, из каких полей брать заголовок и значение. return-object кладёт в v-model весь объект целиком, а не только значение.

Sandbox Storybook

<script setup lang="ts">
import { CdsSelect } from '@central-design-system/components';
import { ref } from 'vue';

const select = ref({ lang: 'Русский', code: 'ru' });
const languages = ref([
  { lang: 'English', code: 'en' },
  { lang: 'Русский', code: 'ru' },
  { lang: 'Deutsch', code: 'de' },
  { lang: 'Français', code: 'fr' },
  { lang: 'Italiano', code: 'it' },
  { lang: 'Español', code: 'es' },
  { lang: 'Português', code: 'pt' },
  { lang: 'Nederlands', code: 'nl' },
  { lang: 'Polski', code: 'pl' },
  { lang: 'Svenska', code: 'sv' },
  { lang: 'Dansk', code: 'da' },
  { lang: 'Türkçe', code: 'tr' },
  { lang: '日本語', code: 'ja' },
  { lang: '中文', code: 'zh' },
  { lang: '한국어', code: 'ko' },
  { lang: 'العربية', code: 'ar' },
  { lang: 'עברית', code: 'he' }
]);
</script>

<template>
  <div class="w-[350px] m-auto">
    <CdsSelect
      v-model="select"
      :items="languages"
      item-title="lang"
      item-value="code"
      return-object
      label="Выберите язык"
      placeholder="Выбрать язык"
      :messages="select.lang + ' (' + select.code + ')'"
    />
  </div>
</template>

Группировка

Длинный список делите на смысловые блоки: элемент с type: 'subheader' добавляет подзаголовок, с type: 'divider' — разделитель. Такие элементы не выбираются.

Sandbox Storybook

<script setup lang="ts">
import { CdsSelect } from '@central-design-system/components';
import { ref } from 'vue';

const items = [
  { type: 'subheader', title: 'Европа' },
  'Австрия',
  'Германия',
  'Франция',
  { type: 'divider' },
  { type: 'subheader', title: 'Азия' },
  'Китай',
  'Южная Корея',
  'Япония'
];

const selected = ref(null);
</script>

<template>
  <div class="w-[350px] m-auto">
    <CdsSelect v-model="selected" :items="items" label="Страна производства" placeholder="Выберите страну" />
  </div>
</template>

Множественный выбор

Свойство multiple разрешает выбрать несколько значений: у элементов появляются чекбоксы, а поле перечисляет выбранное через запятую. ellipsis удерживает перечисление в одну строку и обрезает лишнее многоточием.

Sandbox Storybook

<script setup lang="ts">
import { CdsSelect } from '@central-design-system/components';
import { ref } from 'vue';

const items = ref([
  'Австрия',
  'Бельгия',
  'Болгария',
  'Венгрия',
  'Германия',
  'Греция',
  'Дания',
  'Ирландия',
  'Испания',
  'Италия',
  'Кипр',
  'Латвия',
  'Литва',
  'Люксембург',
  'Мальта',
  'Нидерланды',
  'Польша',
  'Португалия',
  'Румыния',
  'Словакия',
  'Словения',
  'Финляндия',
  'Франция',
  'Хорватия',
  'Чехия',
  'Швеция',
  'Эстония'
]);

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

<template>
  <div class="flex flex-col gap-2 w-[350px] m-auto">
    <CdsSelect v-model="selected" multiple :items="items" label="Множественный выбор" placeholder="Выбрать страну" />

    <CdsSelect
      v-model="selected"
      multiple
      ellipsis
      :items="items"
      label="Множественный выбор в строку"
      placeholder="Выбрать страну"
    />
  </div>
</template>

Выбор всех значений

Свойство is-select-all добавляет первым пунктом списка «Выбрать все» (работает вместе с multiple). Значение true использует надпись по умолчанию, строка задаёт собственную.

Sandbox Storybook

<script setup lang="ts">
import { CdsSelect } from '@central-design-system/components';
import { ref } from 'vue';

const items = ref([
  'Австрия',
  'Бельгия',
  'Болгария',
  'Венгрия',
  'Германия',
  'Греция',
  'Дания',
  'Ирландия',
  'Испания',
  'Италия',
  'Кипр',
  'Латвия',
  'Литва',
  'Люксембург',
  'Мальта',
  'Нидерланды',
  'Польша',
  'Португалия',
  'Румыния',
  'Словакия',
  'Словения',
  'Финляндия',
  'Франция',
  'Хорватия',
  'Чехия',
  'Швеция',
  'Эстония'
]);

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

<template>
  <div class="flex flex-col gap-2 w-[350px] m-auto">
    <CdsSelect
      v-model="selected"
      multiple
      is-select-all
      :items="items"
      label="Множественный выбор с «Выбрать все»"
      placeholder="Выбрать страну"
    />

    <CdsSelect
      v-model="selectedCustom"
      multiple
      is-select-all="Отметить все страны"
      :items="items"
      label="Своя надпись «Выбрать все»"
      placeholder="Выбрать страну"
    />
  </div>
</template>

Чипы

Свойство chips показывает выбранные значения тегами CdsTag, closable-chips добавляет им крестик — значение снимается прямо в поле, без открытия меню.

Sandbox Storybook

<script setup lang="ts">
import { CdsSelect } from '@central-design-system/components';
import { ref } from 'vue';

const items = ['Австрия', 'Бельгия', 'Германия', 'Греция', 'Испания', 'Италия', 'Франция'];

const selected = ref(['Германия', 'Испания']);
const selectedClosable = ref(['Австрия', 'Италия', 'Франция']);
</script>

<template>
  <div class="flex flex-col gap-2 w-[350px] m-auto">
    <CdsSelect v-model="selected" multiple chips :items="items" label="Чипы" placeholder="Выбрать страну" />

    <CdsSelect
      v-model="selectedClosable"
      multiple
      chips
      closable-chips
      :items="items"
      label="Удаляемые чипы"
      placeholder="Выбрать страну"
    />
  </div>
</template>

Нативный список

Свойство native-select заменяет кастомное меню нативным <select>: на мобильных устройствах системный список привычнее. Фильтрация, виртуальная прокрутка и слоты меню в этом режиме не работают.

Sandbox Storybook

<script setup lang="ts">
import { CdsSelect } from '@central-design-system/components';
import { ref } from 'vue';

const items = ['Первый', 'Второй', 'Третий', 'Четвёртый'];

const selected = ref(null);
</script>

<template>
  <div class="w-[350px] m-auto">
    <CdsSelect
      v-model="selected"
      native-select
      :items="items"
      label="Выберите значение"
      placeholder="Выбрать значение"
    />
  </div>
</template>

Настройка списка

Проп list-props прокидывает любые пропсы внутреннему CdsList — в примере bgColor красит фон меню, а slim убирает внутренние отступы меню, и список заполняет его целиком. item-color задаёт цвет выбранных элементов (по умолчанию берётся color). Точно так же menu-props настраивает внутренний CdsMenu, а menu-height ограничивает высоту меню.

Sandbox Storybook

<script setup lang="ts">
import { CdsSelect } from '@central-design-system/components';
import { ref } from 'vue';

const items = ['Яблоко', 'Апельсин', 'Банан', 'Груша'];

const selected = ref(['Яблоко']);
</script>

<template>
  <div class="w-[350px] m-auto">
    <CdsSelect
      v-model="selected"
      multiple
      :items="items"
      :list-props="{ bgColor: 'other-cyan-fill', slim: true }"
      item-color="status-warning-fill"
      label="Выберите фрукты"
      placeholder="Выбрать фрукт"
    />
  </div>
</template>

Слоты

Селект отдаёт под замену каждую часть меню и поля. Слоты самого поля — те же, что у CdsTextInput.

Имя слота	Описание
item	Элемент списка целиком; получает item, index и props
selection	Выбранное значение в поле
chip	Чип выбранного значения (при chips)
prepend-item / append-item	Контент до и после списка
no-data	Контент меню при пустом списке
subheader / divider	Подзаголовок и разделитель группы
menu-header / menu-footer	Шапка и подвал меню; получают search и filteredItems

Слот item переопределяет отрисовку элемента полностью. Обязательно передайте props в CdsListItem — в них живёт обработчик выбора. В примере у каждой страны выводится флаг и столица.

Sandbox Storybook

<script setup lang="ts">
import { CdsListItem, CdsSelect } from '@central-design-system/components';
import { ref } from 'vue';

const countries = ref([
  { title: 'Австрия', flag: '🇦🇹', capital: 'Вена' },
  { title: 'Бельгия', flag: '🇧🇪', capital: 'Брюссель' },
  { title: 'Германия', flag: '🇩🇪', capital: 'Берлин' },
  { title: 'Греция', flag: '🇬🇷', capital: 'Афины' },
  { title: 'Испания', flag: '🇪🇸', capital: 'Мадрид' },
  { title: 'Италия', flag: '🇮🇹', capital: 'Рим' },
  { title: 'Нидерланды', flag: '🇳🇱', capital: 'Амстердам' },
  { title: 'Польша', flag: '🇵🇱', capital: 'Варшава' },
  { title: 'Португалия', flag: '🇵🇹', capital: 'Лиссабон' },
  { title: 'Финляндия', flag: '🇫🇮', capital: 'Хельсинки' },
  { title: 'Франция', flag: '🇫🇷', capital: 'Париж' },
  { title: 'Швеция', flag: '🇸🇪', capital: 'Стокгольм' }
]);
</script>

<template>
  <CdsSelect class="w-[350px] m-auto" :items="countries" label="Страны" placeholder="Выбрать страну">
    <template #item="{ item, props }">
      <CdsListItem v-bind="props" :title="item.title">
        <template #prepend>
          <span class="mr-3 text-2xl">{{ item.flag }}</span>
        </template>
        <template #description>
          Столица: <strong>{{ item.capital }}</strong>
        </template>
      </CdsListItem>
    </template>
  </CdsSelect>
</template>

Слот selection — своё отображение выбранного в поле: первые две страны выводятся тегами, остальные сворачиваются в счётчик.

Sandbox Storybook

<script setup lang="ts">
import { CdsSelect, CdsTag } from '@central-design-system/components';
import { ref } from 'vue';

const items = ref([
  'Австрия',
  'Бельгия',
  'Германия',
  'Греция',
  'Испания',
  'Италия',
  'Нидерланды',
  'Польша',
  'Португалия',
  'Франция',
  'Швеция'
]);
const selected = ref(['Португалия', 'Испания', 'Франция']);
</script>

<template>
  <CdsSelect
    v-model="selected"
    class="w-[350px] m-auto"
    multiple
    :items="items"
    label="Выберите страны"
    placeholder="Выбрать страну"
  >
    <template #selection="{ item, index }">
      <CdsTag v-if="index < 2" :text="item" size="sm" />

      <span v-if="index === 2" class="self-center text-sm text-gray-500"> (+{{ selected.length - 2 }} ещё) </span>
    </template>
  </CdsSelect>
</template>

Слоты prepend-item и append-item добавляют собственные пункты в начало и конец списка. В примере в начале — «Выбрать все страны» с чекбоксом, в конце — «Добавить еще» с имитацией подгрузки через loading.

Sandbox Storybook

<script setup lang="ts">
import { CdsCheckbox, CdsListItem, CdsListItemDivider, CdsSelect } from '@central-design-system/components';
import { computed, ref } from 'vue';

const allCountries = [
  'Австрия',
  'Бельгия',
  'Болгария',
  'Венгрия',
  'Германия',
  'Греция',
  'Дания',
  'Ирландия',
  'Испания',
  'Италия',
  'Кипр',
  'Латвия',
  'Литва',
  'Люксембург',
  'Мальта',
  'Нидерланды',
  'Польша',
  'Португалия',
  'Румыния',
  'Словакия',
  'Словения',
  'Финляндия',
  'Франция',
  'Хорватия',
  'Чехия',
  'Швеция',
  'Эстония'
];

const loading = ref(false);
const countries = ref(allCountries.slice(0, 3));
const selected = ref<string[]>([]);

const allSelected = computed(() => countries.value.length > 0 && selected.value.length === countries.value.length);
const someSelected = computed(() => selected.value.length > 0);
const hasMore = computed(() => countries.value.length < allCountries.length);

function selectingAll() {
  selected.value = allSelected.value ? [] : countries.value.slice();
}

async function addMore() {
  if (!hasMore.value) return;

  try {
    loading.value = true;
    await new Promise((resolve) => setTimeout(resolve, 1000));

    countries.value = [...countries.value, allCountries[countries.value.length]];
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <CdsSelect
    v-model="selected"
    class="w-[350px] m-auto"
    multiple
    :loading="loading"
    :items="countries"
    label="Страны"
    placeholder="Выбрать страну"
  >
    <template #prepend-item>
      <CdsListItem title="Выбрать все страны" link @click="selectingAll">
        <template #prepend>
          <CdsCheckbox
            :model-value="allSelected"
            :indeterminate="someSelected && !allSelected"
            tabindex="-1"
            hide-messages
          />
        </template>
      </CdsListItem>

      <CdsListItemDivider />
    </template>

    <template #append-item>
      <CdsListItemDivider />

      <CdsListItem v-if="hasMore" title="Добавить еще" prepend-icon="add" :disabled="loading" link @click="addMore" />
    </template>
  </CdsSelect>
</template>

Слоты menu-header и menu-footer добавляют контент в шапку и подвал меню — например, поле поиска и кнопку подтверждения. В оба слота приходят search (записывается в v-model:search и фильтрует список) и filteredItems.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsListItemDivider, CdsSelect, CdsTextInput } from '@central-design-system/components';
import { ref } from 'vue';

const items = ref([
  { id: 1, value: 'Австрия' },
  { id: 2, value: 'Бельгия' },
  { id: 3, value: 'Германия' },
  { id: 4, value: 'Греция' },
  { id: 5, value: 'Испания' },
  { id: 6, value: 'Италия' },
  { id: 7, value: 'Нидерланды' },
  { id: 8, value: 'Франция' },
  { id: 9, value: 'Португалия' }
]);
const model = ref([]);
const menu = ref(false);
</script>

<template>
  <CdsSelect
    v-model="model"
    v-model:menu="menu"
    class="w-[350px] m-auto"
    :items="items"
    item-title="value"
    item-value="id"
    multiple
    menu-height="280"
    label="Выберите страны"
    placeholder="Выбрать страну"
  >
    <template #menu-header="{ search, filteredItems }">
      <div class="p-2">
        <CdsTextInput
          v-model="search.value"
          :error="!!search.value && !filteredItems.length"
          placeholder="Поиск..."
          prepend-inner-icon="search"
          clearable
          hide-messages
        />
      </div>

      <CdsListItemDivider />
    </template>

    <template #menu-footer="{ search, filteredItems }">
      <CdsListItemDivider />

      <div class="flex items-center p-2 pl-4">
        <span v-if="search.value" class="text-sm text-brand-secondary-content">
          Найдено {{ filteredItems.length }} из {{ items.length }}
        </span>

        <CdsButton class="ml-auto" text="Принять" @click="menu = false" />
      </div>
    </template>
  </CdsSelect>
</template>

Рекомендации

Storybook

Сценарии использования

Отправка формы

Селект участвует в валидации CdsForm наравне с текстовыми полями: rules не пропустит форму без выбранной темы. Необязательным полям задавайте значение по умолчанию — так форма заполняется быстрее.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsForm, CdsSelect } from '@central-design-system/components';
import { ref } from 'vue';

const topics = ['Вопрос по заказу', 'Проблема с оплатой', 'Возврат товара', 'Другое'];
const priorities = ['Низкий', 'Средний', 'Высокий'];

const valid = ref(false);
const topic = ref(null);
const priority = ref('Средний');
const loading = ref(false);
const sent = ref(false);

const rules = [(value: string) => !!value || 'Выберите тему обращения'];

async function submit() {
  if (!valid.value) return;

  try {
    loading.value = true;
    sent.value = false;
    await new Promise((resolve) => setTimeout(resolve, 1500));
    sent.value = true;
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <CdsForm v-model="valid" class="flex flex-col gap-2 w-[350px] m-auto" @submit.prevent="submit">
    <CdsSelect v-model="topic" :items="topics" :rules="rules" label="Тема обращения" placeholder="Выберите тему" />

    <CdsSelect v-model="priority" :items="priorities" label="Приоритет" />

    <CdsButton type="submit" :loading="loading" text="Отправить" />

    <p v-if="sent" class="text-sm text-center">Обращение отправлено</p>
  </CdsForm>
</template>

Зависимые списки

Список городов зависит от выбранной страны: пока страны нет, второй селект выключен через disabled, во время загрузки вариантов показывает loading. При смене страны выбранный город сбрасывается — иначе в форме останется несуществующая пара.

Sandbox Storybook

<script setup lang="ts">
import { CdsSelect } from '@central-design-system/components';
import { ref, watch } from 'vue';

const citiesByCountry: Record<string, string[]> = {
  Германия: ['Берлин', 'Гамбург', 'Мюнхен', 'Франкфурт'],
  Испания: ['Барселона', 'Валенсия', 'Мадрид', 'Севилья'],
  Франция: ['Лион', 'Марсель', 'Ницца', 'Париж']
};
const countries = Object.keys(citiesByCountry);

const country = ref<string | null>(null);
const city = ref<string | null>(null);
const cities = ref<string[]>([]);
const loading = ref(false);

watch(country, async (value) => {
  city.value = null;
  cities.value = [];
  if (!value) return;

  try {
    loading.value = true;
    await new Promise((resolve) => setTimeout(resolve, 800));
    cities.value = citiesByCountry[value];
  } finally {
    loading.value = false;
  }
});
</script>

<template>
  <div class="flex flex-col gap-2 w-[350px] m-auto">
    <CdsSelect v-model="country" :items="countries" label="Страна" placeholder="Выберите страну" />

    <CdsSelect
      v-model="city"
      :items="cities"
      :loading="loading"
      :disabled="!country"
      label="Город"
      :placeholder="country ? 'Выберите город' : 'Сначала выберите страну'"
    />
  </div>
</template>

Выбор исполнителей

Сочетание multiple, chips и closable-chips показывает выбранных людей тегами и снимает их крестиком прямо в поле. Слот item добавляет аватар и роль — так проще найти нужного человека в длинном списке.

Sandbox Storybook

<script setup lang="ts">
import { CdsAvatar, CdsListItem, CdsSelect } from '@central-design-system/components';
import { ref } from 'vue';

const people = [
  { name: 'Анна Смирнова', role: 'Дизайнер', image: 'https://i.pravatar.cc/80?img=47' },
  { name: 'Дмитрий Орлов', role: 'Разработчик', image: 'https://i.pravatar.cc/80?img=12' },
  { name: 'Елена Васильева', role: 'Аналитик', image: 'https://i.pravatar.cc/80?img=44' },
  { name: 'Игорь Крылов', role: 'Разработчик', image: 'https://i.pravatar.cc/80?img=32' },
  { name: 'Мария Соколова', role: 'Тестировщик', image: 'https://i.pravatar.cc/80?img=26' },
  { name: 'Павел Зайцев', role: 'Менеджер проекта', image: 'https://i.pravatar.cc/80?img=59' }
];

const selected = ref(['Анна Смирнова']);
</script>

<template>
  <div class="w-[350px] m-auto">
    <CdsSelect
      v-model="selected"
      multiple
      chips
      closable-chips
      :items="people"
      item-title="name"
      item-value="name"
      label="Исполнители"
      placeholder="Добавьте исполнителей"
    >
      <template #item="{ item, props }">
        <CdsListItem v-bind="props" :title="item.name">
          <template #prepend>
            <CdsAvatar :image="item.image" size="sm" class="mr-3" />
          </template>
          <template #description>{{ item.role }}</template>
        </CdsListItem>
      </template>
    </CdsSelect>
  </div>
</template>

Сортировка результатов

Компактный селект управляет порядком списка: hide-messages убирает нижний блок, aria-label заменяет скрытый лейбл для скринридеров. Выбор применяется сразу — кнопка «Применить» не нужна.

Sandbox Storybook

<script setup lang="ts">
import { CdsList, CdsListItem, CdsSelect } from '@central-design-system/components';
import { computed, ref } from 'vue';

const sortOptions = ['По алфавиту', 'Сначала дешевле', 'Сначала дороже'];
const sort = ref('По алфавиту');

const products = [
  { title: 'Кабель силовой', price: 1200 },
  { title: 'Автомат защиты', price: 350 },
  { title: 'Розетка накладная', price: 90 },
  { title: 'Щит распределительный', price: 4800 },
  { title: 'Светильник потолочный', price: 2100 }
];

const sorted = computed(() => {
  const items = [...products];

  if (sort.value === 'Сначала дешевле') return items.sort((a, b) => a.price - b.price);
  if (sort.value === 'Сначала дороже') return items.sort((a, b) => b.price - a.price);

  return items.sort((a, b) => a.title.localeCompare(b.title));
});
</script>

<template>
  <div class="flex flex-col gap-2 w-[350px] m-auto">
    <CdsSelect v-model="sort" class="w-56 self-end" :items="sortOptions" aria-label="Сортировка" hide-messages />

    <CdsList>
      <CdsListItem v-for="product of sorted" :key="product.title" :title="product.title">
        <template #append>{{ product.price }} ₽</template>
      </CdsListItem>
    </CdsList>
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
active	boolean | undefined	—	Активное состояние поля
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
appendIcon	IconValue | undefined	—	Иконка в слоте append после контента
appendInnerIcon	IconValue | undefined	—	Иконка во внутреннем слоте append после содержимого поля
autocomplete	string | undefined	—	Помогает влиять на предложения браузера. Значение «suppress» изменяет атрибут name полей, а значение «off» полагается на то, что браузер по собственной инициативе перестанет предлагать значения. Любое другое значение передается встроенной функции автозаполнения для соответствующего элемента.
autofocus	boolean | undefined	—	Включает автофокус
baseColor	string | undefined	—	Цвет неактивного компонента
bgColor	string | undefined	—	Цвет фона компонента
centerAffix	boolean | undefined	—	Выровнять по вертикали элементы appendInner, prependInner, clearIcon и label по центру.
chips	boolean | undefined	—	Отображает выбранные значения в виде удаляемых чипов (CdsTag).
clearable	boolean | undefined	—	Отображать кнопку очистки значения
clearIcon	IconValue | undefined	'remove'	Иконка кнопки очистки
closableChips	boolean | undefined	—	Добавляет чипам кнопку удаления (актуально вместе с chips).
closeText	string | undefined	'$cds.close'	Текст для скринридеров, описывающий действие закрытия меню.
color	string | undefined	—	Цвет компонента
counter	string | number | boolean | undefined	—	Счетчик символов. Принимает булево значение, число или строку
counterValue	number | ((value: any) => number) | undefined	—	Пользовательское значение счетчика. Может быть числом или функцией вычисления от текущего значения
customFilter	FilterFunction | undefined	—	Своя функция фильтрации значений. Получает значение, поисковый запрос и элемент, возвращает совпадение или -1
customKeyFilter	FilterKeyFunctions | undefined	—	Отдельные функции фильтрации для конкретных ключей элемента — объект вида { ключ: функция }
description	string | undefined	—	Описание компонента, отображаемое под меткой
disabled	boolean | null | undefined	null	Заблокированное состояние
eager	boolean | undefined	—	Рендерит контент меню заранее, не дожидаясь первого открытия.
ellipsis	boolean | undefined	—	В режиме multiple удерживает выбранные значения в одну строку с многоточием
error	boolean | undefined	—	Состояние ошибки
errorMessages	string | readonly string[] | null | undefined	[]	Отображает компонент в состояние ошибки и передает пользовательские сообщения об ошибках. Будет объединяться с любыми проверками, заданными в свойстве rules. Это поле не запускает валидацию.
filterKeys	FilterKeys | undefined	—	Ключи элемента, по которым идёт поиск. По умолчанию фильтрация идёт по заголовку элемента
filterMode	FilterMode | undefined	'intersection'	Как объединяются результаты customKeyFilter и общей фильтрации: пересечением, объединением или заменой
focused	boolean | undefined	—	Управляет состоянием фокуса компонента. Когда true, компонент считается сфокусированным и может применять соответствующие стили или поведение.
hideDetails	boolean | "auto" | undefined	—	Скрытие блока с деталями (сообщениями и подсказками). При значении 'auto' блок скрывается, если нет сообщений
hideMessages	boolean | undefined	—	Скрыть сообщения под полем ввода
hideNoData	boolean | undefined	—	Скрывает меню и плейсхолдер «нет данных», когда список элементов пуст.
hideSelected	boolean | undefined	—	Скрывает уже выбранные элементы из списка меню.
hint	string | undefined	—	Текст подсказки, отображаемый под полем ввода
iconColor	string | boolean | undefined	—	Цвет иконки. Принимает булево значение или строку с цветом
id	string | undefined	—	Уникальный идентификатор компонента
isSelectAll	string | boolean | undefined	false	Добавляет первым элементом списка пункт «Выбрать все» (только для multiple). true использует надпись по умолчанию $cds.selectAll, строка задаёт собственную надпись.
itemChildren	SelectItemKey	false	Свойство объекта, содержащее дочерние элементы, либо функция для их получения
itemColor	string | undefined	—	Цвет выбранных элементов в списке меню. По умолчанию используется color.
itemProps	SelectItemKey	'props'	Свойство объекта, содержащее пропсы для элемента, либо функция для их получения
items	any[] | undefined	[]	Массив элементов для отображения
itemTitle	SelectItemKey	'title'	Свойство объекта, используемое как заголовок элемента, либо функция для его получения
itemType	SelectItemKey	'type'	Свойство объекта, определяющее тип элемента (item, divider, subheader), либо функция для его получения
itemValue	SelectItemKey	'value'	Свойство объекта, используемое как значение элемента, либо функция для его получения
label	string | undefined	—	Текст метки (label) компонента
listProps	CdsListProps | undefined	—	Пропсы, прокидываемые во внутренний компонент CdsList.
loading	string | boolean | undefined	—	Индикатор загрузки для компонента
maxErrors	string | number | undefined	1	Максимальное число отображаемых ошибок при валидации
maxWidth	string | number | undefined	—	Максимальная ширина компонента
menu	boolean | undefined	—	Управляет состоянием открытия выпадающего меню (v-model:menu).
menuHeight	string | number | undefined	178	Максимальная высота выпадающего меню.
menuIcon	IconValue | undefined	'chevron-down'	Иконка-индикатор раскрытия меню.
menuProps	CdsMenuProps | undefined	—	Пропсы, прокидываемые во внутренний компонент CdsMenu.
messages	string | readonly string[] | undefined	[]	Сообщения для отображения под полем ввода
minWidth	string | number | undefined	—	Минимальная ширина компонента
modelModifiers	Record<string, boolean> | undefined	—	Модификаторы v-model, переданные Vue для обработки значения поля
modelValue	any	null	Значение компонента в v-model. Если компонент поддерживает свойство multiple, по умолчанию используется пустой массив.
multiple	boolean | undefined	—	Разрешает выбор нескольких значений. Выбранные элементы отображаются чипами или списком.
name	string | undefined	—	Имя поля ввода
nativeSelect	boolean | undefined	—	Отображает нативный HTML-select вместо кастомного выпадающего меню (CdsMenu)
noAutoScroll	boolean | undefined	—	Отключает автоматическую прокрутку меню к выбранному элементу при открытии.
noDataText	string | undefined	'$cds.noDataText'	Текст, отображаемый в меню, когда список элементов пуст.
noFilter	boolean | undefined	—	Отключает встроенную фильтрацию — список показывается как есть, поиск обрабатывается снаружи
openOnClear	boolean | undefined	—	Открывает меню после очистки значения.
openText	string | undefined	'$cds.open'	Текст для скринридеров, описывающий действие открытия меню.
persistentClearable	boolean | undefined	—	Всегда отображать кнопку очистки, а не только при наведении или фокусе
persistentCounter	boolean | undefined	—	Всегда отображать счетчик, а не только при взаимодействии с полем
persistentHint	boolean | undefined	—	Всегда отображать подсказку, а не только при фокусе
persistentPlaceholder	boolean | undefined	—	Всегда отображать placeholder, а не скрывать его при взаимодействии с полем
placeholder	string | undefined	—	Текст-заполнитель, отображаемый в пустом поле
prefix	string | undefined	—	Текстовый префикс, отображаемый перед значением поля
prependIcon	IconValue | undefined	—	Иконка в слоте prepend перед контентом
prependInnerIcon	IconValue | undefined	—	Иконка во внутреннем слоте prepend перед содержимым поля
readonly	boolean | null | undefined	null	Только для чтения
returnObject	boolean | undefined	—	Возвращать в значении модели объект вместо массива
reverse	boolean | undefined	—	Обратный порядок расположения элементов внутри поля
role	string | undefined	'combobox'	ARIA-роль для нативного элемента ввода
rules	readonly ValidationRule[] | undefined	[]	Принимает массив, состоящий из элементов различных типов: функций, логических значений и строк. Функции принимают входное значение в качестве аргумента и должны возвращать либо true / false, либо строку, содержащую сообщение об ошибке. Поле ввода перейдет в состояние ошибки, если функция возвращает значение false (или любое значение в массиве содержит false) либо является строкой.
search	string | undefined	—	Текущее значение поискового запроса для фильтрации элементов (v-model:search).
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Размер компонента
suffix	string | undefined	—	Текстовый суффикс, отображаемый после значения поля
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента
transition	string | boolean | (TransitionProps & { component?: Component | undefined; }) | { component: Component; } | null | undefined	{ component: CdsModalTransition }	Анимация перехода
type	string | undefined	'text'	Тип нативного поля ввода
validateOn	ValidateOn | undefined	—	Изменяет тип события, при котором запускается валидация
valueComparator	ValueComparator | undefined	—	Функция сравнения значений элементов для определения выбранного состояния
width	string | number | undefined	—	Ширина компонента

События

Имя	Тип	Описание
update:focused	[focused: boolean]	Изменение состояния фокуса компонента (v-model:focused).
update:menu	[ue: boolean]	Изменение состояния открытия выпадающего меню (v-model:menu).
update:modelValue	[value: any]	Изменение выбранного значения (v-model).
update:search	[value: string]	Изменение поискового запроса (v-model:search).
update:selectedAll	[value: boolean]	Изменение состояния «выбраны все» (только для multiple + isSelectAll).

Слоты

Имя	Тип	Описание
append	CdsInputSlot	Добавляет элемент после поля ввода
append-inner	CdsInputDefaultSlot	Слот, добавляемый в конце инпута ввода
append-item	any	Контент после списка элементов в меню.
chip	{ item: any; internalItem: ListItem<any>; index: number; props: Record<string, unknown>; }	Кастомный рендеринг чипа выбранного значения (актуально вместе с chips).
clear	CdsInputDefaultSlot & { props: Record<string, any>; }	Слот для пользовательского иконки очистки (отображается, когда свойство clearable имеет значение «true»).
description	{ description: string | undefined; props: Record<string, any>; }	Слот по умолчанию для компонента CdsDescription
details	CdsInputSlot	Слот для ввода пользовательских данных, позволяющее настраивать отображение сообщений
divider	{ props: Record<string, unknown>; index: number; }	Кастомный рендеринг разделителя в списке меню.
item	{ item: any; internalItem: ListItem<any>; index: number; props: Record<string, unknown>; }	Кастомный рендеринг элемента списка в меню.
label	{ label: string | undefined; props: Record<string, any>; }	Слот по умолчанию для компонента CdsLabel
loader	LoaderSlotProps	Слот для пользовательского загрузчика (отображается, если свойство loading имеет значение true).
menu-footer	{ search: Ref<string | undefined, string | undefined>; filteredItems: ListItem<any>[]; }	Контент подвала меню. Получает текущий поисковый запрос и отфильтрованные элементы.
menu-header	{ search: Ref<string | undefined, string | undefined>; filteredItems: ListItem<any>[]; }	Контент шапки меню. Получает текущий поисковый запрос и отфильтрованные элементы.
message	CdsMessageSlot	Слот для настройки содержания сообщения
messages	CdsInputSlot	Слот для ввода пользовательских данных, позволяющее настраивать отображение сообщений
no-data	any	Контент, отображаемый в меню, когда список элементов пуст.
prepend	CdsInputSlot	Добавляет элемент до поля ввода
prepend-inner	CdsInputDefaultSlot	Слот, добавляемый в начало инпута ввода
prepend-item	any	Контент перед списком элементов в меню.
selection	{ item: any; internalItem: ListItem<any>; index: number; }	Кастомный рендеринг выбранного значения в поле ввода.
subheader	{ props: Record<string, unknown>; index: number; }	Кастомный рендеринг подзаголовка группы в списке меню.

Exposed

Имя	Тип	Описание
controlRef	HTMLElement | undefined	Ref-ссылка на контролл поля ввода
fieldIconColor	string | undefined	Цвет иконки
filteredItems	ListItem<any>[]	Элементы, отфильтрованные по текущему поисковому запросу.
isDirty	boolean	Является ли поле ввода "грязным"
isDisabled	boolean	Является ли поле ввода заблокированным
isFocused	boolean	Находится ли компонент в фокусе.
isPure	boolean	Является ли поле ввода "чистым"
isReadonly	boolean	Является ли поле ввода только для чтения
isValid	boolean | null	Является ли поле ввода валидным
isValidating	boolean	Является ли поле ввода в процессе валидации
reset	() => Promise<void>	Функция сброса поля ввода в исходное состояние
resetValidation	() => Promise<void>	Функция сброса валидации поля ввода
selectAll	() => void	Переключить выбор всех доступных элементов (только для multiple + isSelectAll).
validate	(silent?: boolean) => Promise<string[]>	Функция валидации поля ввода