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'