Select

사용자가 미리 정의된 옵션 목록 중 하나 혹은 하나 이상의 항목을 선택할 수 있는 입력 요소입니다.

Design

Web

iOS

Android

Anatomy

1. Heading
2. Required badge
3. Leading icon
4. Dropdown icon
5. Placeholder
6. Description
7. Field

States

Trigger components

Select의 기본 호출 요소로 웹에서만 호출이 가능하며 단일, 복수 선택이 가능합니다.

Bottom sheet, Popup과 같은 모든 형태의 모달을 호출할 수 있으며 모바일에서는 Menu 대신 Bottom sheet를 호출합니다. 이 외에도 모바일에서 상세한 필터를 제공할 때에는 Bottom sheet, 데스크탑 환경에서는 Popup 형태의 모달을 활용할 수 있습니다.

Render

Render 요소는 Text와 Chip 두가지로 이루어져 있습니다. Text는 단일, 복수의 값을 모두 표현할 수 있으며 Chip은 복수의 값을 표현할 때만 사용 권장하고 있습니다.

Overflow

Overflow는 False가 기본값이며 중요한 값들을 관리하기 용이하도록 별도 스크롤이나 액션 없이 필드 내에서 한 눈에 볼 수 있게 하는 옵션입니다.

Gap

필드 간의 간격은 기본적으로 Description의 활성 여부와 관계없이 동일한 간격을 유지합니다. 단, 레이아웃이 제한적인 상황일 시 필드가 고정되어 위치하여 Description 만큼 간격이 줄어들 수 있습니다.

Accessibility

Key	Description
`ArrowDown`	다음 요소로 포커스를 이동합니다.
`ArrowUp`	이전 요소로 포커스를 이동합니다.
`Home` `PageUp`	첫 번째 요소로 포커스를 이동합니다.
`End` `PageDown`	마지막 요소로 포커스를 이동합니다.
`Enter`	현재 포커스된 요소를 클릭합니다.

Usage

Single selection

기본적으로 Radio 사용을 권장하지만 즉각적인 입력을 유도해야 할 경우 Check icon과 함께 배치하여 사용할 수 있습니다.

Multi selection

복수 선택일 경우 반드시 유저가 인지할 수 있어야하기 때문에 Menu에서 Checkbox를 사용을 권장합니다. 필드 내의 Render 타입은 자유롭게 사용할 수 있지만 가급적 Chip 형태 사용을 권장합니다.

How to use

사유를 명확하게 안내하여 사용자에게 명확한 행동을 유도합니다.

Don’t

Trailing icon의 스타일을 임의로 변경하지 않습니다.