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	選択時に発火（2 引数：値と選択肢オブジェクト）	`(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'

基本的な使い方​

Select Props​

LhSelectOption​

Select イベント​

キーボード操作​

ref​

スタイル​