Custom Select 컴포넌트 데모

키보드: 버튼에서 Enter/Space/Arrow로 열기, 열린 상태에서 Arrow/Home/End/Enter/Escape 지원. Tab은 기본 이동.

1) 기본

옵션 A
옵션 B
옵션 C
항목 1
항목 2
항목 3
항목 4
항목 5
항목 6
항목 7
항목 8
항목 9
항목 10
항목 11
항목 12
항목 13
항목 14
항목 15
항목 16
항목 17
항목 18
항목 19
항목 20
여 레이온 코튼 시어서커 반팔 파자마 셔츠 - 네이비/M
여 레이온 코튼 시어서커 반팔 파자마 셔츠 - 네이비/L
여 레이온 코튼 시어서커 반팔 파자마 셔츠 - 화이트/S (품절)
여 레이온 코튼 시어서커 반팔 파자마 셔츠 - 화이트/M
항목 1
항목 2
항목 3
항목 4
항목 5
항목 6
항목 7
항목 8
항목 9
항목 10
항목 11
항목 12
항목 13
항목 14
항목 15
항목 16
항목 17
항목 18
항목 19
항목 20

2) 상태/비활성

항목 1
항목 2
선택 가능
비활성(스킵)
선택 가능

3) 커스텀 프로퍼티(블루 테마)

파란 테마 1
파란 테마 2
파란 테마 3

4) 이벤트 & 프로그램 제어

Value 1
Value 2
Value 3

5) 옵션 패턴 예시

0) 단순 텍스트
1) Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum harum consequatur cupiditate eveniet quos veniam et possimus, nihil minima facere! Maiores, facere explicabo quidem voluptatem eligendi maxime distinctio mollitia at?
2) aria-label 내용 적용
3) HTML 구조 적용된 옵션명은 그대로 복사됩니다.
4) 옵션명 품절
5) 품절 임박 남은 수량 : 1
6) 제품명 1줄 말줄임 제품명 1줄 말줄임 제품명 1줄 말줄임 제품명 1줄 말줄임 - 옵션명
7) 라이트 인디고 라이트 인디고 라이트 인디고 라이트 인디고 라이트 인디고 라이트 인디고 라이트 인디고
8) 그레이 품절

위 예시는 다양한 마크업 패턴(aria-label, disabled, tag, colorchip, 제품명/옵션명 결합)을 한 Select 안에 혼합했을 때 접근성과 시각 패턴을 점검하기 위한 데모입니다.