7onicDESIGN SYSTEM

Select

Select는 드롭다운 목록에서 하나의 값을 선택하는 폼 컨트롤입니다. 키보드 조작과 스크린 리더를 완전히 지원하며, 네이티브 폼 제출에도 대응합니다.

2
Position
5
Sizes
Form
Sync
Radix
Base

Playground

미리보기
default
Size
Radius
Position
Flush
Disabled
<Select>
  <Select.Trigger>
    <Select.Value placeholder="Select a fruit" />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="apple">Apple</Select.Item>
    <Select.Item value="banana">Banana</Select.Item>
    <Select.Item value="cherry">Cherry</Select.Item>
    <Select.Item value="grape">Grape</Select.Item>
  </Select.Content>
</Select>

Variants

Basic
단일 선택 목록으로 구성된 기본 셀렉트
카테고리 선택
Grouped
그룹과 라벨로 관련 항목을 분류
국가, 지역 분류
With Placeholder
아무것도 선택하지 않은 상태에서 플레이스홀더 표시
초기 상태 안내
Flush
모서리 없이 전체 너비를 채우는 고밀도 스타일
고밀도 목록
Disabled Items
일부 아이템을 선택 불가로 설정
사용 불가 옵션

Sizes

xs
높이36px
폰트13px
sm
높이40px
폰트14px
default
높이44px
폰트16px
lg
높이48px
폰트16px
xl
높이56px
폰트16px

API

Component Structure

Select— Radix Select
.TriggerProps.Value.ContentProps.ItemProps.Group.Label.Separator

Props

Select (Root)

size"default"
"xs" | "sm" | "default" | "lg" | "xl"

Trigger의 높이와 폰트 크기. Content에 자동 전파

radius"default"
"none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full"

모서리 둥글기 (6px). Trigger에 직접 적용, Content에 자동 매핑

valueundefined
string

제어 모드의 선택값

defaultValueundefined
string

비제어 모드의 초기값

onValueChangeundefined
(value: string) => void

값 변경 시 콜백

nameundefined
string

폼 제출용 이름

requiredundefined
boolean

필수 필드 지정

disabledundefined
boolean

전체 비활성화

openundefined
boolean

제어 모드의 열림/닫힘 상태

onOpenChangeundefined
(open: boolean) => void

열림/닫힘 상태 변경 시 콜백

Select.Trigger

disabledundefined
boolean

트리거 버튼 비활성화

asChildfalse
boolean

자식 요소를 트리거로 렌더링

Select.Content

position"popper"
"item-aligned" | "popper"

드롭다운 배치 방식

flushfalse
boolean

아이템을 전체 너비로 표시 (패딩 없음)

side"bottom"
"top" | "right" | "bottom" | "left"

드롭다운 표시 방향 (popper 전용)

sideOffset1
number

트리거와의 거리 (px)

Select.Item

value—
string

아이템 값 (필수)

disabledundefined
boolean

아이템 선택 불가

textValueundefined
string

타입어헤드용 텍스트 값

Customization

className으로 트리거와 콘텐츠의 스타일을 커스터마이즈할 수 있습니다.

너비 변경

<Select.Content className="w-72">

전체 너비 트리거

<Select.Trigger className="w-full">

Tip: 각 서브 컴포넌트는 className을 받아 Tailwind 클래스로 스타일을 오버라이드할 수 있습니다.

Anatomy

1
2
3
Apple
4
5
6
Apple
7
Banana
Cherry
1
Root
컴포넌트 루트
2
Trigger
셀렉트를 여는 버튼
3
Value
선택값 표시
4
Chevron
열림/닫힘 아이콘
5
Content
드롭다운 패널
6
Item
선택 아이템
7
Separator
구분선

Best Practices

✓

권장

  • ✓선택지가 5개 이상일 때 사용
  • ✓선택지가 많을 때 Group으로 분류
  • ✓placeholder로 선택 내용을 안내
  • ✓폼 안에서는 name과 required를 설정
✕

지양

  • ✗선택지가 3개 이하면 Radio 검토
  • ✗액션 실행에는 Dropdown을 사용
  • ✗다중 선택이 필요하면 다른 UI 검토
  • ✗placeholder 없이 초기값도 미설정하지 않기

Accessibility

키보드 조작

Enter셀렉트 열기/닫기 / 아이템 선택
Space셀렉트 열기/닫기 / 아이템 선택
↑ ↓아이템 간 이동
Home첫 번째 아이템으로 이동
End마지막 아이템으로 이동
Escape셀렉트 닫기

ARIA 속성

  • role="listbox" Content에 자동 부여
  • role="option" Item에 자동 부여
  • aria-expanded Trigger 상태 관리
  • 타입어헤드 문자 검색

Select vs Dropdown

외관은 비슷하지만 용도와 동작이 다릅니다. 적절한 컴포넌트를 선택하세요.

용도

Select: 값 선택

Dropdown: 액션 실행

폼 연동

Select: name / value 제출 가능

Dropdown: 없음

선택 후 표시

Select: 선택값이 트리거에 반영

Dropdown: 메뉴만 닫힘

아이템 종류

Select: 단일 선택 아이템

Dropdown: Item, Checkbox, Radio, Sub

사용 사례

Select: 국가, 카테고리, 정렬 순서

Dropdown: 컨텍스트 메뉴, 계정 작업

선택 기준: 값을 선택해 폼에 제출할 때는 Select가 적합합니다. 클릭 시 액션(편집, 삭제, 공유 등)을 실행할 때는 Dropdown 을 사용하세요.