Vega UI

Select

셀렉트(select)는 사용자에게 여러개의 옵션 목록을 팝업으로 제공하여 그 중 한 개의 값을 선택할 수 있도록 하는 경우에 사용합니다.

Anatomy

Container : select와 배경을 구분
Placeholder : select 선택을 유도하는 문구
ICON : select의 열고 닫는 상태를 나타냄
Option List : select 클릭 시 표출되는 option 목록
Option title(선택) : 옵션의 분류가 필요할 때 타이틀 사용
Option : 사용자 선택할 수 있는 값
선택된 Option : 선택된 옵션의 값
구분선(선택) : 옵션 목록과의 구분이 필요할 때 사용
Disable Option(선택) : 비활성화된 옵션 값

State

Select 상태는 Default / Complete / Focus / Error / Disable 5가지로 사용합니다.
Select Option 상태는 Default / Hover / Checked / Error / Disable,
Focus 상태일 때, border color는 해당 솔루션의 primary color를 사용합니다.

Select

Default

Complete

Focus

Error

Disable

Select Option

Size

사이즈는 높이를 기준으로 sm / md / lg 3가지를 사용합니다.

lg (40px)

md (36px)

sm (30px)

사용 가이드

사용 관련

사용자가 목록에서 옵션 선택이 중요한 사안일 경우 Select보단 Radio를 사용합니다.

Don’t

날짜 선택 시 불필요한 Select를 반복하는 것 보다 Date picker를 활용합니다.

Anatomy
State
Size
사용 가이드