Dropdown
Dropdown
Dropdown
Dropdown은 선택 가능한 항목 목록을 표시하여, 사용자가 원하는 옵션을 빠르게 선택할 수 있도록 돕습니다. 주로 Select 컴포넌트나 Button 컴포넌트와 함께 사용됩니다.
Dropdown
Dropdown은 선택 가능한 항목 목록을 표시하여, 사용자가 원하는 옵션을 빠르게 선택할 수 있도록 돕습니다. 주로 Select 컴포넌트나 Button 컴포넌트와 함께 사용됩니다.
Dropdown
Dropdown은 선택 가능한 항목 목록을 표시하여, 사용자가 원하는 옵션을 빠르게 선택할 수 있도록 돕습니다. 주로 Select 컴포넌트나 Button 컴포넌트와 함께 사용됩니다.
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
State
State
Properties
Checkbox | false, true |
Description | false, true |
Search Input | false, true |
State | default, hover, selected |
Align | left, center |
Properties
Checkbox | false, true |
Description | false, true |
Search Input | false, true |
State | default, hover, selected |
Align | left, center |
Properties
Checkbox | false, true |
Description | false, true |
Search Input | false, true |
State | default, hover, selected |
Align | left, center |
Spec
 | Height & Scroll Behavior최대 높이(max-height)는 182px로 제한합니다. |
 | AlignmentDropdown의 위치에 따라 정렬 방식을 선택할 수 있습니다. |
 | Text OverflowPC 환경에서는 긴 텍스트를 말줄임 처리하고 툴팁으로 제공합니다. |
Spec
Height & Scroll Behavior
최대 높이(max-height)는 182px로 제한합니다.
Alignment
Dropdown의 위치에 따라 정렬 방식을 선택할 수 있습니다.
(예: 오른쪽에 위치한 경우 오른쪽 정렬)
Text Overflow
PC 환경에서는 긴 텍스트를 말줄임 처리하고 툴팁으로 제공합니다.
모바일 환경에서는 루프(loop) 형태로 처리합니다.
Spec
| Height & Scroll Behavior최대 높이(max-height)는 182px로 제한합니다. |
| AlignmentDropdown의 위치에 따라 정렬 방식을 선택할 수 있습니다. |
| Text OverflowPC 환경에서는 긴 텍스트를 말줄임 처리하고 툴팁으로 제공합니다. |
Usage
Do
5개 이상의 항목이 존재할 경우, 스크롤을 제공하여 접근성을 높입니다.
Do
선택지가 많은 경우, 검색 옵션을 활성화합니다.
Don't
긴 레이블은 두 줄로 줄바꿈되지 않도록 한 줄로 처리합니다.
Usage
Do
5개 이상의 항목이 존재할 경우, 스크롤을 제공하여 접근성을 높입니다.
Do
선택지가 많은 경우, 검색 옵션을 활성화합니다.
Don't
긴 레이블은 두 줄로 줄바꿈되지 않도록 한 줄로 처리합니다.
Usage
Do
5개 이상의 항목이 존재할 경우, 스크롤을 제공하여 접근성을 높입니다.
Do
선택지가 많은 경우, 검색 옵션을 활성화합니다.
Don't
긴 레이블은 두 줄로 줄바꿈되지 않도록 한 줄로 처리합니다.