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

Выпадающий список с контролируемым / неконтролируемым режимами, навигацией с клавиатуры и очисткой.

Базовое использование

Контролируемый выбор

Выберите стиль живописи⌄

Текущее значение: (не выбрано)

import { useState } from 'react'
import { LhSelect } from '@lh-ui/react'
import type { LhSelectOption } from '@lh-ui/react'

const options: LhSelectOption[] = [
  { label: 'Тушь', value: 'ink' },
  { label: 'Даньцин', value: 'danqing' },
  { label: 'Пустота', value: 'blank' },
  { label: 'Гунби', value: 'gongbi' },
]

export default function Demo() {
  const [value, setValue] = useState<string>('')

  return (
    <LhSelect
      value={value}
      options={options}
      placeholder="Выберите стиль живописи"
      onChange={(val) => setValue(val as string)}
    />
  )
}

Select Props

Свойство	Описание	Тип	Варианты	По умолчанию
value	Контролируемое значение	unknown	—	—
defaultValue	Неконтролируемое значение по умолчанию	unknown	—	—
options	Список вариантов	LhSelectOption[]	—	[]
placeholder	Плейсхолдер	string	—	Значение из языкового пакета
disabled	Отключить	boolean	—	false
clearable	Разрешить очистку	boolean	—	false
size	Размер	'large' | 'middle' | 'small'	—	Следует за ConfigProvider
name	Нативный атрибут name	string	—	—
ariaLabel	Метка доступности	string	—	—
placement	Расположение выпадания	LhPlacement	—	'bottom-start'
themeVars	Переменные темы на уровне компонента	Record<string, string>	—	—
sx	Сокращённые props макета	SxProps	—	—

LhSelectOption

Свойство	Описание	Тип
label	Отображаемый текст варианта	string
value	Значение варианта	unknown
disabled	Отключить этот вариант	boolean

События Select

Событие	Описание	Сигнатура коллбэка	Аналог в Vue
onChange	Срабатывает при выборе (два аргумента: значение и объект варианта)	(value: unknown, option: LhSelectOption | undefined) => void	@change
onClear	Срабатывает при очистке	() => void	@clear

Взаимодействие с клавиатурой

В раскрытом состоянии: ArrowUp / ArrowDown перемещают подсветку между вариантами (пропуская отключённые), Enter выбирает, Escape сворачивает список. Триггер имеет role="combobox", панель — role="listbox", варианты — role="option", а aria-activedescendant отслеживает подсветку.

ref

forwardRef<HTMLDivElement> — корневой элемент триггера. LhSelectInstance предоставляет open() / close() / focus().

Стили

import '@lh-ui/react/style/select'