Select
사용자가 옵션 중 하나를 선택할 수 있도록 하는 드롭다운 형태의 컴포넌트입니다.
Select
사용자가 옵션 중 하나를 선택할 수 있도록 하는 드롭다운 형태의 컴포넌트입니다.
Select
사용자가 옵션 중 하나를 선택할 수 있도록 하는 드롭다운 형태의 컴포넌트입니다.
Anatomy
ESSENTIAL
1. 레이블
선택 영역 상단에 위치한 설명 텍스트입니다. 입력 필드의 의미나 선택 항목의 맥락을 제공합니다.
2. 드롭다운 버튼
드롭다운 확장을 나타내는 시각적 표시입니다. 하단 방향 화살표(▼) 아이콘을 사용하며, 사용자가 클릭 가능 영역을 직관적으로 인식하도록 돕습니다.
OPTIONAL
3. 레이블 텍스트
현재 선택된 값을 표시하는 텍스트입니다. 사용자가 선택하지 않았을 경우 플레이스홀더로 대체됩니다.
Anatomy
ESSENTIAL
1. 레이블
선택 영역 상단에 위치한 설명 텍스트입니다. 입력 필드의 의미나 선택 항목의 맥락을 제공합니다.
2. 드롭다운 버튼
드롭다운 확장을 나타내는 시각적 표시입니다. 하단 방향 화살표(▼) 아이콘을 사용하며, 사용자가 클릭 가능 영역을 직관적으로 인식하도록 돕습니다.
OPTIONAL
3. 레이블 텍스트
현재 선택된 값을 표시하는 텍스트입니다. 사용자가 선택하지 않았을 경우 플레이스홀더로 대체됩니다.
Anatomy
ESSENTIAL
1. 레이블
선택 영역 상단에 위치한 설명 텍스트입니다. 입력 필드의 의미나 선택 항목의 맥락을 제공합니다.
2. 드롭다운 버튼
드롭다운 확장을 나타내는 시각적 표시입니다. 하단 방향 화살표(▼) 아이콘을 사용하며, 사용자가 클릭 가능 영역을 직관적으로 인식하도록 돕습니다.
OPTIONAL
3. 레이블 텍스트
현재 선택된 값을 표시하는 텍스트입니다. 사용자가 선택하지 않았을 경우 플레이스홀더로 대체됩니다.
State
Control
variant
default
focused
has value
error
Control
variant
default
focused
has value
error
Control
variant
default
focused
has value
error
Properties
size | L, S |
state | default, disabled, hover |
variant | default, error |
has value | false, true |
focused | false, true |
label | false, true |
dropdown | false, true |
background | false, true |
helper text | false, true |
label text | string |
Properties
size | L, S |
state | default, disabled, hover |
variant | default, error |
has value | false, true |
focused | false, true |
label | false, true |
dropdown | false, true |
background | false, true |
helper text | false, true |
label text | string |
Properties
size | L, S |
state | default, disabled, hover |
variant | default, error |
has value | false, true |
focused | false, true |
label | false, true |
dropdown | false, true |
background | false, true |
helper text | false, true |
label text | string |
Spec
 | BehaviorDropdown list와 함께 사용하고, |
 | Responsive Alignment모바일에서는 Bottom Sheet 형태로 |
Spec
Behavior
Dropdown list와 함께 사용하고, z-index는 가장 우선으로 설정합니다.
Responsive Alignment
모바일에서는 Bottom Sheet 형태로 사용합니다.
Spec
| BehaviorDropdown list와 함께 사용하고, |
| Responsive Alignment모바일에서는 Bottom Sheet 형태로 |
Usage
Do
선택지는 짧고 간결하게 작성해야 합니다.
Don't
선택지가 4개 미만인 경우 Select를 사용하지 않습니다.
Usage
Do
선택지는 짧고 간결하게 작성해야 합니다.
Don't
선택지가 4개 미만인 경우 Select를 사용하지 않습니다.
Usage
Do
선택지는 짧고 간결하게 작성해야 합니다.
Don't
선택지가 4개 미만인 경우 Select를 사용하지 않습니다.