Select

드롭다운 목록에서 항목을 선택하는 커스텀 셀렉트입니다. 키보드 접근성을 완벽히 지원합니다.

Preview

소속 기관

<Select defaultValue="">
  <SelectLabel>소속 기관</SelectLabel>
  <SelectTrigger placeholder="기관을 선택하세요" />
  <SelectContent>
    <SelectItem value="mois">행정안전부</SelectItem>
    <SelectItem value="msit">과학기술정보통신부</SelectItem>
    <SelectItem value="moef">기획재정부</SelectItem>
  </SelectContent>
</Select>

Grouped Items

SelectGroup과 SelectGroupLabel로 옵션을 그룹화할 수 있습니다.

담당 부서

<Select defaultValue="">
  <SelectLabel required>담당 부서</SelectLabel>
  <SelectTrigger placeholder="부서를 선택하세요" />
  <SelectContent>
    <SelectGroup>
      <SelectGroupLabel>행정안전부</SelectGroupLabel>
      <SelectItem value="admin-1">지방자치분권실</SelectItem>
      <SelectItem value="admin-2">디지털정부실</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectGroupLabel>과학기술정보통신부</SelectGroupLabel>
      <SelectItem value="msit-1">정보통신정책실</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Sizes

Small

Medium

Large

Error State

민원 유형

민원 유형을 선택해주세요.

<Select defaultValue="">
  <SelectLabel required>민원 유형</SelectLabel>
  <SelectTrigger placeholder="선택하세요" error />
  <SelectContent>
    <SelectItem value="build">건축 허가</SelectItem>
  </SelectContent>
  <SelectError>민원 유형을 선택해주세요.</SelectError>
</Select>

Disabled

비활성 셀렉트

일부 옵션 비활성

일부 옵션은 비활성 상태입니다.

Accessibility

role="combobox" (trigger) + role="listbox" (content) + role="option" (item)
Arrow keys: 드롭다운 열기
Enter / Space: 항목 선택
Escape: 드롭다운 닫기
외부 클릭 시 자동 닫기
선택된 항목에 체크 표시

Sub-components

Component	Description
`Select`	루트 (상태 관리)
`SelectLabel`	라벨 (`required` prop으로 필수 표시)
`SelectTrigger`	트리거 버튼 (`placeholder`, `size`, `error`)
`SelectContent`	드롭다운 패널
`SelectItem`	개별 옵션 (`value` 필수, `disabled` 지원)
`SelectGroup`	옵션 그룹 래퍼
`SelectGroupLabel`	그룹 라벨
`SelectSeparator`	구분선
`SelectError`	에러 메시지
`SelectHelper`	도움말 텍스트

Select Props

Prop	Type	Default	Description
`defaultValue`	`string`	`""`	초기 선택 값
`value`	`string`	-	제어 모드 값
`onValueChange`	`(value: string) => void`	-	선택 변경 핸들러
`disabled`	`boolean`	`false`	전체 비활성

SelectTrigger Props

Prop	Type	Default	Description
`placeholder`	`string`	`"선택하세요"`	미선택 시 텍스트
`size`	`"sm" \| "md" \| "lg"`	`"md"`	크기
`error`	`boolean`	`false`	에러 상태 보더

On this page