Listbox
Базовый выбор
Выбрано: —
Размеры
Состояния
Входные параметры
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
options | SelectOption[] | [] | Список опций: { label: string, value: string | number, disabled?: boolean }. |
placeholder | string | 'Выберите значение' | Подсказка, когда ничего не выбрано. |
size | 'sm' | 'md' | 'lg' | undefined | Размер поля. Если не задан, берётся из C3FormField. |
disabled | boolean | false | Отключает список. |
error | boolean | false | Флаг ошибки. |
name | string | undefined | Имя поля. |
ariaLabel | string | 'Список выбора' | 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: берёт ошибку из контекста и регистрирует геттер значения для валидации.