커스텀 셀렉트

custom-select는 슬롯의 role="option" 요소를 활용해 접근성(listbox 패턴)을 지원하며, 선택 상태와 표시 라벨을 동기화하는 웹 컴포넌트입니다.

기본 사용법

<script type="module">
  if (!window.customElements.get("custom-select")) {
    import("/ui/element/custom-select.js");
  }
</script>

<custom-select id="color" label="색상 선택">
  <div role="option" data-value="red" aria-label="빨강">빨강</div>
  <div role="option" data-value="blue" aria-disabled="true">파랑(비활성)</div>
  <div role="option" data-value="green">초록</div>
</custom-select>

속성 (Attributes)

속성	타입	기본값	설명
label	String	"옵션 선택"	트리거에 표시할 라벨
value	String	—	현재 선택된 옵션의 값
disabled	Boolean	false	비활성화 여부
scrollable-class	String	"v-select-box--scrollable"	스크롤 영역에 추가할 클래스

mode="dropdown"을 지정하면 옵션 목록이 절대 위치로 펼쳐지는 드롭다운 형태로 동작합니다.

옵션 마크업

슬롯에 넣는 각 옵션은 다음을 권장합니다:

• role="option"
• data-value: 선택 시 반환할 값
• aria-label: 옵션 설명 (선택)
• aria-disabled="true": 비활성 옵션

이벤트

이벤트	설명	detail
select	옵션이 선택되었을 때	{ index: number, value: string }
close	옵션 목록이 닫혔을 때	—
open	옵션 목록이 열렸을 때	{ listbox }

프로퍼티 / 메소드

• value: get/set — 현재 선택된 옵션의 값
• selectedIndex: get/set — 선택된 옵션 인덱스
• options: get — 옵션 요소 배열
• length: get — 옵션 개수
• disabled: get/set — 비활성화 여부
• label: get — 트리거 라벨
• reset(): 선택을 초기화