03 · Components · 선택
셀렉트Select
많은 선택지 중 하나를 고르는 드롭다운. 6개 이상일 때 우선 고려하세요. 주님의교회 PCL Select는 네이티브 <select>를 얇게 감싸 접근성·모바일 경험을 자동으로 유지합니다.
StableWCAG AA
기본
tsx
<Select defaultValue="seoul">
<option value="seoul">서울</option>
<option value="busan">부산</option>
<option value="incheon">인천</option>
<option value="daegu">대구</option>
</Select>미리보기
크기
tsx
<Select size="sm">...</Select>
<Select size="md">...</Select>
<Select size="lg">...</Select>미리보기
오류 상태
tsx
<Select invalid defaultValue="">
<option value="" disabled>선택해주세요</option>
<option value="kr">대한민국</option>
</Select>미리보기
네이티브 <select>를 쓰기 때문에 키보드·터치·스크린리더 동작이 OS에 의해 자동으로 보장됩니다. 커스텀 드롭다운(Popover 기반)이 반드시 필요하지 않다면 이쪽을 먼저 시도하세요.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | 높이 32 / 40 / 48px. |
invalid | boolean | 오류 테두리 + aria-invalid 부여. | |
children* | <option>[] | 네이티브 option 엘리먼트. |