Dropdown
Dropdown 컴포넌트는 선택 가능한 항목 목록을 보여주며, 사용자가 빠르게 원하는 옵션을 선택할 수 있도록 도와줍니다.
Dropdown
Dropdown 컴포넌트는 선택 가능한 항목 목록을 보여주며, 사용자가 빠르게 원하는 옵션을 선택할 수 있도록 도와줍니다.
Dropdown
Dropdown 컴포넌트는 선택 가능한 항목 목록을 보여주며, 사용자가 빠르게 원하는 옵션을 선택할 수 있도록 도와줍니다.
Anatomy
ESSENTIAL
1. 레이블
드롭다운의 기본 단위 요소로, 사용자가 선택할 수 있는 옵션의 텍스트입니다. 명확하고 간결한 텍스트로 구성되어야 합니다.
OPTIONAL
2. 디스크립션
각 옵션에 대한 추가 정보를 제공할 때 사용됩니다. 일반적으로 메인 텍스트보다 작은 크기와 낮은 대비로 표현됩니다.
3. 체크박스
멀티 선택이 필요한 경우 사용됩니다. 각 아이템 앞에 Checkbox를 배치하여 다중 선택이 가능하도록 합니다.
4. 검색창
드롭다운 상단에 위치하며, 긴 리스트에서 특정 항목을 빠르게 검색할 수 있도록 도와줍니다. 사용자가 입력한 키워드에 따라 필터링이 이루어집니다.
Anatomy
ESSENTIAL
1. 레이블
드롭다운의 기본 단위 요소로, 사용자가 선택할 수 있는 옵션의 텍스트입니다. 명확하고 간결한 텍스트로 구성되어야 합니다.
OPTIONAL
2. 디스크립션
각 옵션에 대한 추가 정보를 제공할 때 사용됩니다. 일반적으로 메인 텍스트보다 작은 크기와 낮은 대비로 표현됩니다.
3. 체크박스
멀티 선택이 필요한 경우 사용됩니다. 각 아이템 앞에 Checkbox를 배치하여 다중 선택이 가능하도록 합니다.
4. 검색창
드롭다운 상단에 위치하며, 긴 리스트에서 특정 항목을 빠르게 검색할 수 있도록 도와줍니다. 사용자가 입력한 키워드에 따라 필터링이 이루어집니다.
Anatomy
ESSENTIAL
1. 레이블
드롭다운의 기본 단위 요소로, 사용자가 선택할 수 있는 옵션의 텍스트입니다. 명확하고 간결한 텍스트로 구성되어야 합니다.
OPTIONAL
2. 디스크립션
각 옵션에 대한 추가 정보를 제공할 때 사용됩니다. 일반적으로 메인 텍스트보다 작은 크기와 낮은 대비로 표현됩니다.
3. 체크박스
멀티 선택이 필요한 경우 사용됩니다. 각 아이템 앞에 Checkbox를 배치하여 다중 선택이 가능하도록 합니다.
4. 검색창
드롭다운 상단에 위치하며, 긴 리스트에서 특정 항목을 빠르게 검색할 수 있도록 도와줍니다. 사용자가 입력한 키워드에 따라 필터링이 이루어집니다.
State
Control
state
default
hover
selected
check box
search bar
Control
state
default
hover
selected
check box
search bar
Control
state
default
hover
selected
check box
search bar
Properties
state | default, hover |
variant | default, selected |
size | L,S |
align | left,right |
search | false, true |
checkbox | false, true |
description | false, true |
text | string |
Properties
state | default, hover |
variant | default, selected |
size | L,S |
align | left,right |
search | false, true |
checkbox | false, true |
description | false, true |
text | string |
Properties
state | default, hover |
variant | default, selected |
size | L,S |
align | left,right |
search | false, true |
checkbox | false, true |
description | false, true |
text | string |
Spec
 | Height & Scroll Behavior최대 높이(max-height)는 182px로 제한됩니다. |
 | Alignment상대적 위치에 따라 정렬을 선택할 수 있습니다. |
 | Text OverflowPC 환경에서는 긴 텍스트를 말줄임 처리 후 |
Spec
Height & Scroll Behavior
최대 높이(max-height)는 182px로 제한됩니다.
Alignment
상대적 위치에 따라 정렬을 선택할 수 있습니다. (ex. 오른쪽에 위치하면 오른쪽 정렬)
Text Overflow
PC 환경에서는 긴 텍스트를 말줄임 처리 후 툴팁으로 제공하고, 모바일 환경에서는 긴 텍스트를 루프(loop) 형태로 처리합니다.
Spec
| Height & Scroll Behavior최대 높이(max-height)는 182px로 제한됩니다. |
| Alignment상대적 위치에 따라 정렬을 선택할 수 있습니다. |
| Text OverflowPC 환경에서는 긴 텍스트를 말줄임 처리 후 |
Usage
Do
5개 이상의 항목이 존재할 경우 스크롤을 제공하여 접근성을 높입니다.
Do
선택지가 많은 경우 검색 옵션을 활성화 합니다.
Don't
레이블이 두 줄로 넘어가지 않도록 설정합니다.
Usage
Do
5개 이상의 항목이 존재할 경우 스크롤을 제공하여 접근성을 높입니다.
Do
선택지가 많은 경우 검색 옵션을 활성화 합니다.
Don't
레이블이 두 줄로 넘어가지 않도록 설정합니다.
Usage
Do
5개 이상의 항목이 존재할 경우 스크롤을 제공하여 접근성을 높입니다.
Do
선택지가 많은 경우 검색 옵션을 활성화 합니다.
Don't
레이블이 두 줄로 넘어가지 않도록 설정합니다.