Select

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

Anatomy

1. Container
2. Leading content
3. Placeholder
4. Dropdown icon
5. Value

States

Size

Large, Medium 2가지 사이즈를 제공합니다. 너비는 자유롭게 지정할 수 있으며, 필드 안에 넣는 아이콘과 Chip은 필드 사이즈에 맞춰 크기와 간격이 정해집니다.

Trigger components

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

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

Render

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

Overflow

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

Accessibility

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