Выпадающий список

Выпадающий выбор. По умолчанию выпадающий слой монтируется на body (позиционирование fixed следует за триггером); контейнер можно задать через popperContainer либо передать пустое значение для рендера на месте; полная клавиатурная навигация (стрелки / Enter / ESC).

Выпадающий список

<template>
  <div class="demo-col" style="gap: 18px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhSelect v-model="value" :options="options" placeholder="Выберите тематику" clearable name="theme" />
      <LhSelect v-model="value" :options="options" size="small" />
      <LhSelect v-model="value" :options="options" size="large" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhSelect v-model="value" :options="options" disabled />
      <LhSelect v-model="empty" :options="[]" aria-label="Пустые данные">
        <template #empty>
          <span class="demo-note">Слот empty: нет подходящих тематик</span>
        </template>
      </LhSelect>
    </div>
    <p class="demo-note">Текущее значение: {{ value || '(не выбрано)' }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    value: 'ink',
    empty: undefined,
    options: [
      { value: 'ink', label: 'Тушь' },
      { value: 'paper', label: 'Рисовая бумага' },
      { value: 'seal', label: 'Печать' },
      { value: 'blank', label: 'Незаполненное пространство' },
    ],
  }),
}
</script>

Props

Проп	Описание	Тип	По умолчанию
v-model	Выбранное значение (сопоставляется с option.value; контролируемый проп modelValue)	unknown	—
options	Список вариантов { value, label, disabled? }	LhSelectOption[]	[]
placeholder	Текст-плейсхолдер; по умолчанию из языкового пакета	string	t('select.placeholder')
clearable	Показывать кнопку очистки	boolean	false
size	Размер	'small' \| 'medium' \| 'large'	'medium'
disabled	Отключение	boolean	false
popperContainer	Целевой элемент монтирования выпадающего слоя	'body' \| HTMLElement \| string	'body'
name / ariaLabel	Аннотации для доступности	string	—
sx	Проп sx для быстрого макета	—	—

Events

Событие	Описание	Параметры обратного вызова
input	Событие v-model	—
change	Срабатывает при изменении выбранного значения	(value, option)
clear	Срабатывает при очистке	—

Slots

Слот	Описание
empty	Содержимое при отсутствии данных (по умолчанию «Нет данных»)

Доступность

Триггер role="combobox" + aria-expanded/haspopup, выпадающий список role="listbox", варианты role="option"; при размещении внутри LhFormItem и ошибке валидации автоматически устанавливается aria-invalid.