Listbox

Базовый выбор

Выбрано: —

Размеры

Состояния

Входные параметры

ИмяТипПо умолчаниюОписание
optionsSelectOption[][]Список опций: { label: string, value: string | number, disabled?: boolean }.
placeholderstring'Выберите значение'Подсказка, когда ничего не выбрано.
size'sm' | 'md' | 'lg'undefinedРазмер поля. Если не задан, берётся из C3FormField.
disabledbooleanfalseОтключает список.
errorbooleanfalseФлаг ошибки.
namestringundefinedИмя поля.
ariaLabelstring'Список выбора'ARIA-подпись списка.

v-model привязывает выбранное значение через defineModel<string | number | undefined>().

Описание

Компонент C3Listbox — список выбора: триггер открывает меню опций с полноценной клавиатурной навигацией. Выбранная опция подсвечивается галочкой.

Используйте options для списка и v-model для выбранного значения. Подходит как альтернатива нативному select с кастомным оформлением.

Дополнительная информация

  • Слоты отсутствуют.
  • Меню рендерится через Teleport to="body" с ролью listbox; опции — role="option" с aria-selected.
  • Триггер открывается кликом, Enter, пробелом или ArrowDown; несёт aria-haspopup="listbox" и aria-expanded.
  • Клавиатура в меню: ArrowDown/ArrowUp — навигация, Home/End — к краям, Enter/пробел — выбор, Escape — закрытие.
  • Компонент интегрируется с C3FormField: берёт ошибку из контекста и регистрирует геттер значения для валидации.
×