Select 셀렉트

드롭다운 선택입니다. 기본적으로 드롭다운은 body에 마운트되며 (fixed 배치로 트리거를 따라감), popperContainer로 컨테이너를 지정하거나 빈 값을 전달해 제자리에 렌더링할 수 있습니다. 완전한 키보드 내비게이션 (방향 키 / Enter / ESC)을 지원합니다.

셀렉트

<template>
  <div class="demo-col" style="gap: 18px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhSelect v-model="value" :options="options" placeholder="주제를 선택하세요" clearable name="theme" />
      <LhSelect v-model="value" :options="options" size="small" />
      <LhSelect v-model="value" :options="options" size="large" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhSelect v-model="value" :options="options" disabled />
      <LhSelect v-model="empty" :options="[]" aria-label="데이터 없음">
        <template #empty>
          <span class="demo-note">empty 슬롯: 일치하는 주제가 없습니다</span>
        </template>
      </LhSelect>
    </div>
    <p class="demo-note">현재 값: {{ value || '(미선택)' }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    value: 'ink',
    empty: undefined,
    options: [
      { value: 'ink', label: '수묵' },
      { value: 'paper', label: '선지' },
      { value: 'seal', label: '인장' },
      { value: 'blank', label: '여백' },
    ],
  }),
}
</script>

Props

프로퍼티	설명	타입	기본값
v-model	선택 값 (option.value와 일치, 제어되는 modelValue prop)	unknown	—
options	옵션 목록 { value, label, disabled? }	LhSelectOption[]	[]
placeholder	플레이스홀더 텍스트, 생략 시 언어 팩 사용	string	t('select.placeholder')
clearable	지우기 버튼 표시	boolean	false
size	크기	'small' \| 'medium' \| 'large'	'medium'
disabled	비활성화	boolean	false
popperContainer	드롭다운 마운트 대상	'body' \| HTMLElement \| string	'body'
name / ariaLabel	접근성 라벨링	string	—
sx	sx 레이아웃 단축	—	—

이벤트

이벤트	설명	콜백 매개변수
input	v-model 이벤트	—
change	선택 값이 변경될 때 발생	(value, option)
clear	지워질 때 발생	—

슬롯

슬롯	설명
empty	데이터가 없을 때 내용 (기본값 "데이터 없음")

접근성

트리거는 role="combobox" + aria-expanded/haspopup, 드롭다운은 role="listbox", 옵션은 role="option"입니다. LhFormItem 내에서 유효성 검사에 실패하면 자동으로 aria-invalid가 부여됩니다.