SSelect

Обзор

Combobox: выбор из списка с триггером SInput, поиском и multiple.

Связанные:

SInputSDropdownSListSListItem

Usage

Одиночный выбор с label и placeholder.

Открыть в Storybook

API

Краткий справочник props, slots и events — см. API Reference.

Guide

SSelect — combobox для выбора из списка: триггер на базе SInput, панель — SDropdown + SList.

• Значение — v-model (примитив поля itemValue или объект опции при returnObject).
• multiple — массив значений; отображение выбора в триггере через слот #selection (по умолчанию текст через запятую, для тегов — STag).
• searchable="input" — фильтра в поле триггера; searchable="content" — отдельное поле поиска в шапке панели.
• closeOnSelect — закрывать панель после выбора в single (по умолчанию true).
• closableOptions — крестик справа у выбранных строк в списке (multiple).
• Кастомная строка — слот #option (scope как у SList #item).

<SSelect
  v-model="status"
  label="Status"
  placeholder="Select option"
  :options="statusOptions"
  clearable
/>

<SSelect v-model="tags" multiple closable-options :options="options">
  <template #selection="slotScope">
    <STag
      v-for="(label, index) in slotScope.labels"
      :key="slotScope.values[index]"
      closable
      :model-value="label"
      @close="slotScope.removeValue(slotScope.values[index])"
    />
  </template>
</SSelect>

Props

Multiple

Открыть в Storybook

Clearable

Открыть в Storybook

Searchable (input)

Открыть в Storybook

Searchable (content)

Открыть в Storybook

Multiple с тегами

Слот #selection и STag для chips в триггере.

Открыть в Storybook

Теги и поиск в поле

Открыть в Storybook

Крестик в списке

Проп closableOptions — снятие выбора в строке списка.

Открыть в Storybook

Панель остаётся открытой

Проп closeOnSelect: false для single.

Открыть в Storybook

Return object

Открыть в Storybook

С ошибкой

Открыть в Storybook

Кастомная строка

Слот #option и SListItem.

Открыть в Storybook

API Reference

Свойства

Имя	Тип	Описание	По умолчанию
options обязательный	TItem[]	Набор опций выпадающего списка.
itemValue	keyof TItem & string	Поле значения для v-model и фильтрации; по умолчанию value.	'value'
itemTitle	keyof TItem & string	Поле подписи в списке и на триггере.	'label'
itemSubtitle	keyof TItem & string	Поле подзаголовка строки списка.	'subtitle'
itemId	keyof TItem & string	Поле ключа строки для SList; по умолчанию совпадает с itemValue.	—
itemDisabled	keyof TItem & string	Поле флага disabled.	'disabled'
itemIconLeft	keyof TItem & string	Поле имени иконки слева.	'iconLeft'
multiple	boolean	Разрешает выбор нескольких значений.	false
returnObject	boolean & TReturnObject	В v-model отдавать объект опции целиком, а не значение itemValue.

Тип boolean & TReturnObject (а не просто TReturnObject) обязателен: это и делает значение источником вывода дженерика TReturnObject, и сохраняет рантайм-регистрацию пропа как Boolean (иначе Vue выведет type: null). | false | | clearable | boolean | Кнопка очистки выбранных значений. | false | | closableOptions | boolean | Крестик справа в выбранных строках списка для снятия выбора. | false | | searchable | ESSelectSearchable | false | Фильтрация: в поле (input) или в шапке панели (content). | false | | closeOnSelect | boolean | Закрывает панель после выбора в single-режиме. | true | | listHeight | number | string | Максимальная высота списка опций; при малом числе пунктов подстраивается под контент. | 320 | | searchPlaceholder | string | Плейсхолдер поля поиска в панели при searchable="content". | 'Search' | | filterOption | (…) => … | Пользовательский предикат фильтрации опций. | — | | fitViewport | boolean | Ограничивать панель пересечением overflow-предков reference. Отключите (false) внутри контейнеров с overflow: hidden, если панель не появляется. | true | | modelValue / v-model:searchQuery | string | Двустороннее значение для v-model:searchQuery. | '' |

События

Имя	Описание	Payload
clear	Срабатывает после очистки значения кнопкой clear.	—
focus	Триггер получил фокус.	FocusEvent
blur	Триггер потерял фокус.	FocusEvent
open	Панель открылась.	—
close	Панель закрылась.	—

Слоты

Имя	Описание
option	Кастомная строка; scope — SList (item, key, …)
empty	Состояние пустой выдачи после фильтрации
panel-footer	Дополнительный блок под списком опций
label
prefix
prepend
selection	Отображение выбранных значений в multiple (теги, chips).
При searchable="input" поле фильтрации рендерится в control после содержимого слота.
value-suffix
message