셀렉트

옵션 수가 적은 단순 폼 선택에 쓰는 네이티브 select 래퍼다. Input 과 같은 시각 언어를 쓰며, option 은 children 으로 직접 전달한다. 검색·그룹·생성 같은 복합 선택은 SearchableDropdown 또는 CreatableDropdown 을 쓴다.

상태

default

disabled

활용 방법

폼 선택

상태·우선순위·카테고리처럼 선택지가 적고 고정된 폼 필드에 쓴다.

Preview

우선순위

tsx

<Select name="priority" defaultValue="normal">
  <option value="low">낮음</option>
  <option value="normal">보통</option>
  <option value="high">높음</option>
</Select>

플레이스홀더

선택 전 안내가 필요하면 disabled option 을 첫 항목으로 둔다.

Preview

tsx

<Select defaultValue="">
  <option value="" disabled>담당자를 선택하세요</option>
  <option value="kim">김민준</option>
  <option value="lee">이서연</option>
</Select>

사용 지침

· 옵션이 8개 이하이고 검색이 필요 없으면 Select 를 쓴다.
· 검색·그룹·아이콘이 필요하면 SearchableDropdown 을 쓴다.
· 선택지 생성까지 필요하면 CreatableDropdown 을 쓴다.

속성

이름	타입	기본값	설명
className	string	"w-full"	래퍼 폭 조절
children	ReactNode	-	option / optgroup
...props	SelectHTMLAttributes	-	name·value·defaultValue·required·disabled 등 전달