Select 選擇器

下拉選擇器，支援受控 / 非受控、鍵盤導覽、清空。

基礎用法

受控選擇

請選擇畫風⌄

當前值：（未選擇）

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	快速版面配置屬性	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'