Dropdown

드롭다운은 사용자가 선택할 수 있는 옵션 목록을 가진 컴포넌트예요. 이 선택으로 폼을 채우거나 콘텐츠를 필터·정렬할 수 있습니다. 여러 옵션 중 하나를 고르거나 다중 선택·직접 입력이 필요한 경우에 맞춰 다양한 변형을 제공합니다.

출처: Dropdown

본문

AI 라벨이 있는 드롭다운(Dropdown), 콤보 박스(combo box), 멀티셀렉트(multiselect)가 이제 안정(stable) 버전이 됐어요. 이 추가는 컴포넌트의 시각적 모양을 바꾸고, 컴포넌트에 AI가 있을 때 AI 설명 가능성 기능을 도입합니다. 자세한 내용은 AI 존재(AI presence) 섹션을 참고하세요.

개요 (Overview)

서로 다른 기능을 지원하는 드롭다운 변형이 세 가지 있어요—dropdown, multiselect, combo box.

언제 사용할까요 (When to use)

드롭다운은 전체 페이지, 모달, 사이드 패널의 폼에서 사용할 수 있어요. 드롭다운 컴포넌트는 페이지의 콘텐츠를 필터·정렬하는 데 사용됩니다. select 컴포넌트의 스타일화된 버전이며 필요에 따라 스타일링할 수 있어요.

언제 사용하지 말아야 할까요 (When not to use)

옵션이 제한적인 경우 (Limited options)

선택지가 두 개뿐이라면 드롭다운을 사용하지 않는 것이 모범 사례예요. 이 경우 라디오 버튼(radio button) 그룹을 대신 사용하세요.

중첩 (Nesting)

드롭다운을 중첩하거나 과도하게 복잡한 정보를 표시하는 데 사용하지 마세요. 옵션 선택을 가능한 한 직관적으로 유지하세요.

폼 기반 또는 모바일 플랫폼 (Form-based or mobile platform)

경험의 대부분이 폼 기반이거나 모바일 플랫폼에서 자주 사용된다면 select(선택) 사용을 고려하세요. 네이티브 HTML select는 데이터를 제출할 때 더 쉽게 동작하며 모바일 플랫폼에서도 사용하기 더 쉽습니다.

변형 (Variants)

변형 (Variant)	용도 (Purpose)
Dropdown	사용자가 목록에서 하나의 옵션을 선택할 수 있게 해줌.
Multiselect	사용자가 목록에서 여러 옵션을 선택하고 필터링할 수 있게 해줌.
Combo box	사용자가 큰 목록에서 옵션을 선택하거나 자신의 사용자 정의 값을 직접 입력할 수 있게 해줌.

포맷 (Formatting)

구조 (Anatomy)

드롭다운은 네 개의 구분된 섹션으로 구성돼요—라벨이나 헬퍼 텍스트 같은 보조 텍스트, 필드, 메뉴, 메뉴 안에 포함된 옵션. 라벨과 헬퍼 텍스트는 사용자가 선택할 때 정보에 입각한 결정을 내리도록 안내할 수 있어요.

Default
Fluid
라벨(Label): 드롭다운 옵션 목록에서 무엇을 기대하는지 알려주는 텍스트.
헬퍼 텍스트(Helper text): 사용자가 올바른 선택을 하도록 돕는 보조 텍스트.
필드(Field): 드롭다운이 열리거나 닫힐 때 유지되는 부분.
메뉴(Menu): 열린 상태로 표시되는 선택할 옵션 목록.
옵션(Option): 메뉴에서 다른 선택지와 함께 표시되는 사용자를 위한 선택.
부모 체크박스(Parent checkbox): 멀티셀렉트 드롭다운에서 메뉴 안의 모든 옵션을 선택하는 데 사용.

스타일링 (Styling)

드롭다운 입력에는 기본(default)과 플루이드(fluid)의 두 가지 스타일이 있어요. 기능은 같지만 시각적으로 다르게 보이며, 어디에 사용할지에 영향을 줍니다.

스타일 (Style)	모양 (Appearance)	사용 사례 (Use case)
Default	라벨이 입력 필드 바깥과 위에 배치되는 전통적인 스타일.	입력 컴포넌트 사이에 여백이 필요하거나 공간이 빠듯하고 더 작은 컴포넌트가 필요한 생산적(productive) 순간에 사용.
Fluid	라벨이 입력 필드 안에 배치되고 사용자 입력 텍스트와 인라인으로 겹쳐지는 대체 스타일.	표현적(expressive) 순간, 플루이드 폼, 제한된 공간, 또는 툴바 같은 복잡한 컴포넌트에 붙일 때 사용.

왼쪽에 기본 스타일 입력, 오른쪽에 플루이드 스타일.

크기 (Sizing)

기본 드롭다운 높이 크기는 세 가지가 있어요: small, medium, large. 세 가지 드롭다운 크기를 지원하면 레이아웃을 구성할 때 더 많은 유연성을 얻을 수 있어요. 그러나 같은 페이지의 모든 폼 컴포넌트에는 일관된 크기를 사용하세요. 예를 들어 중간 크기 드롭다운을 사용한다면 같은 크기의 텍스트 입력, 버튼 등을 사용하세요. 확신이 없으면 기본 중간 크기 높이를 사용합니다.

크기 (Size)	높이 (px/rem)	사용 사례 (Use case)
Small (sm)	32 / 2	공간이 제한되거나 길고 복잡한 폼에 드롭다운을 배치할 때 사용.
Medium (md)	40 / 2.5	이것이 기본 크기이자 가장 흔히 사용되는 크기.
Large (lg)	48 / 3	작업할 공간이 많을 때 이 크기를 선택. 보통 단순한 폼이나 드롭다운이 페이지에 단독으로 배치될 때(예: 필터) 사용.

메뉴가 열리면 메뉴의 각 옵션은 필드와 같은 높이여야 해요.

플루이드 입력 높이 (Fluid inputs heights)

플루이드 드롭다운에는 입력 높이가 하나뿐이지만 메뉴 항목 크기는 두 가지가 있어요—기본(default)과 밀집(condensed).

플루이드 크기 (Fluid size)	높이 (px/rem)	사용 사례 (Use case)
Default	64 / 4	표현적 순간에 메뉴 옵션이 더 적을 때 사용.
Condensed	40 / 2.5	메뉴 옵션이 많아 스크롤 없이 한 번에 더 많이 볼 수 있게 할 때 사용.

너비 (Width)

드롭다운에 최소·최대 너비는 없어요. 너비는 그 맥락에 맞게 사용자화할 수 있습니다.

배치 (Placement)

필드 컨테이너는 페이지의 다른 폼 컴포넌트와 세로로 정렬되어야 해요. 그리드 컬럼에 딱 붙게 정렬될지 거터에 걸칠지는 사용하는 드롭다운 스타일에 따라 달라집니다.

기본 스타일 드롭다운 컨테이너를 그리드에 딱 붙게 정렬해서 입력 라벨이 페이지의 다른 타입과 정렬되도록 하세요.

기본 스타일 드롭다운을 그리드 거터에 걸치지 마세요.

플루이드 컴포넌트를 서로 사이에 간격 없이 딱 붙게 배치하세요.

플루이드 컴포넌트를 사이에 세로·가로 간격을 두고 사용하지 마세요.

콘텐츠 (Content)

주요 요소 (Main elements)

라벨 텍스트 (Label text)

라벨 텍스트는 드롭다운 옵션 목록에서 무엇을 기대하는지 사용자에게 알려줘요.
라벨 텍스트를 한 줄로 제한해 짧고 간결하게 유지하세요.
드롭다운 필드에 자리 표시자 텍스트를 쓰는 대신 라벨 텍스트를 제거하지 마세요. 가능하면 라벨을 항상 포함하는 것이 강력히 권장됩니다.

헬퍼 텍스트 (Helper text)

헬퍼 텍스트는 사용자가 드롭다운 메뉴에서 올바른 선택을 하도록 돕는 관련 정보예요.
헬퍼 텍스트는 드롭다운 필드가 포커스될 때 항상 사용 가능하며 라벨 아래에 나타납니다.

필드 자리 표시자 텍스트 (Field placeholder text)

자리 표시자 텍스트는 목록에서 아직 옵션이 선택되지 않은 경우 드롭다운 필드에 표시하는 선택 사항이에요. 목록에서 옵션을 선택하면 사라지기 때문에 자리 표시자 텍스트에 중요한 정보를 넣지 마세요. 항상 보이는 드롭다운 라벨 텍스트나 헬퍼 텍스트에 중요한 정보를 아껴두세요.
드롭다운 필드에 드롭다운과 상호작용하는 방법을 나타내는 명확하고 간결한 자리 표시자 텍스트를 사용하세요. 예를 들어 "Choose an option"이 드롭다운의 자리 표시자 텍스트로 흔히 사용됩니다.

옵션 텍스트 (Option text)

드롭다운 옵션 텍스트는 간결하고 정확해야 하며 설명적이지 않아야 해요.
드롭다운 안에 장식용 이미지나 아이콘을 절대 사용하지 마세요.
옵션을 알파벳 순서로 제시할 것을 권장합니다.

부모 체크박스 텍스트 (Parent checkbox text)

부모 체크박스 텍스트는 옵션 중 하나이므로 액션으로 설명하지 마세요.
부모 체크박스를 설명하는 데는 "All"이라는 단어를 사용하세요.
또는 "All roles"처럼 보조 설명 단어를 추가해 메뉴의 옵션을 설명할 수 있어요.

선택 필수 대 선택 사항 필드 (Optional versus required fields)

드롭다운은 여러 요인에 따라 선택 사항 또는 필수로 라벨링될 수 있어요. 자세한 내용은 폼 Usage 탭 지침을 참고하세요.

넘침 콘텐츠 (Overflow content)

드롭다운에서 여러 줄의 텍스트는 피하세요. 텍스트가 한 줄에 맞기 너무 길면 넘침에 생략 부호(…)를 추가하고 툴팁으로 전체 텍스트를 표시하세요—가능하면 키보드 접근성을 위해 Carbon 툴팁을 사용하는 것이 좋습니다.

추가 가이드 (Further guidance)

더 자세한 콘텐츠 지침은 Carbon의 콘텐츠 가이드라인을 참고하세요.

공통 동작 (Universal behaviors)

이 섹션에 나열된 동작은 모든 변형에 공통입니다. 각 변형에 고유한 동작은 아래 섹션을 참고하세요.

방향 (Direction)

드롭다운은 화면에서의 위치에 따라 위나 아래로 열릴 수 있어요. 예를 들어 드롭다운이 인터페이스 하단 가장자리에 가깝게 나타나면 잘리지 않도록 메뉴가 위로 확장됩니다. 기본적으로 Carbon 드롭다운은 아래로 열립니다.

입체감 (Elevation)

드롭다운 메뉴에는 열릴 때 메뉴 뒤에 배치되는 box-shadow라는 스타일이 있어서, 뒤에 떨어질 수 있는 콘텐츠보다 메뉴가 더 높은 입체감을 가지게 합니다. Box-shadow는 오버플로우 메뉴와 날짜 선택기 달력처럼 겹쳐진 메뉴가 있는 다른 컴포넌트에서도 사용됩니다. box-shadow의 SCSS는 0 2px 6px 0 rgba(0,0,0,.2)입니다.

스크롤 동작 (Scrolling behavior)

스크롤 바가 항상 활성화되지 않을 수 있으므로 마지막 옵션 컨테이너 높이의 50%를 보여 메뉴 안에 더 볼 것이 있음을 나타내는 것을 권장합니다. 메뉴 목록의 여섯 번째 옵션에서 스크롤을 시작할 것을 권장하지만, 이는 특정 사용 사례에 따라 달라질 수 있어요.

상태 (States)

드롭다운, 콤보 박스, 멀티셀렉트는 필드와 메뉴 모두에 일련의 상태가 있습니다: enabled, hover, focus, error, warning, disabled, skeleton, read-only. 상태에 대한 자세한 내용은 스타일 탭의 인터랙션 상태(interactive states) 지침을 방문하세요.

입력 필드의 세로 구분선 (Vertical dividers in input fields)

세로 구분선은 입력 필드의 인터랙티브 요소 사이의 시각적 구분자 역할을 해요. 이 세로 구분선은 두 인터랙티브 요소 사이에만 존재하며, 오류 상태나 다른 비인터랙티브 아이콘, 버튼 같은 비인터랙티브 요소 사이에는 도입하면 안 됩니다.

가장 왼쪽 인터랙티브 항목 세트의 왼쪽에도 구분선이 있어요(옆이 비인터랙티브 항목이어도).

입력 필드의 두 인터랙티브 요소 사이에 세로 구분선을 도입하세요.

입력 필드의 인터랙티브와 비인터랙티브 요소 사이에 세로 구분선을 도입하지 마세요.

입력 필드의 가장 왼쪽 인터랙티브 세트 왼쪽에 세로 구분선을 도입하세요.

같은 아이콘 세트에서 일부 아이콘에만 세로 구분선이 있고 일부는 없는 식으로 세로 구분선을 일관성 없이 사용하지 마세요.

입력 필드의 가장 왼쪽 인터랙티브 세트 왼쪽에 세로 구분선을 도입하세요.

같은 아이콘 세트에서 일부 아이콘에만 세로 구분선이 있고 일부는 없는 식으로 세로 구분선을 일관성 없이 사용하지 마세요.

인터랙션 (Interactions)

마우스 (Mouse)

사용자는 chevron 아이콘을 클릭하거나 필드 안 아무 곳이나 클릭해 드롭다운 메뉴가 열리게 합니다. chevron 아이콘을 클릭하거나 메뉴 밖을 클릭해 메뉴를 닫을 수 있어요.

Default
Fluid
옵션을 선택하려면 사용자가 옵션 컨테이너 안 아무 곳이나 클릭할 수 있어요.
Default
Fluid
multiselect 드롭다운의 목록에서 선택된 모든 옵션을 지우려면 태그 안의 값 옆에 있는 "x" 아이콘을 클릭하세요.
combo box 또는 필터 가능한 멀티셀렉트 드롭다운에서 선택된 값을 지우려면 필드 입력 텍스트 오른쪽의 "x" 아이콘을 클릭하세요.

키보드 (Keyboard)

드롭다운 컴포넌트와 그 변형 multiselect, combo box는 Tab으로 도달하며, Up과 Down 화살표 키로 옵션을 탐색합니다. 그러나 컴포넌트를 열고 옵션을 선택하는 키는 각 변형마다 다릅니다. 키보드 인터랙션에 대한 자세한 내용은 접근성 탭을 참고하세요.

사용자가 사전 정의된 옵션 목록에서 하나의 옵션을 선택해야 할 때 드롭다운을 사용하세요. 드롭다운은 대체 선택지를 제공하는 최적의 기본 옵션입니다. 화면 공간이 제한될 때도 좋은 선택이에요.

Default
Fluid
메뉴에서 옵션을 선택하면 메뉴가 닫히고 선택된 옵션 텍스트가 필드의 자리 표시자 텍스트를 대체하며, 메뉴가 열려 있다면 옵션으로 그 자리에 유지됩니다.

Multiselect (멀티셀렉트)

사용자가 사전 정의된 옵션 목록에서 여러 옵션을 선택해야 할 때 멀티셀렉트를 사용하세요. 사용자가 여러 기준에 따라 페이지의 콘텐츠를 필터·정렬해야 할 때 멀티셀렉트가 좋은 선택이에요. 다중 선택을 가능하게 하기 위해 목록의 각 옵션에 체크박스 아이콘이 포함됩니다.

선택하기 (Making a selection)

기본적으로 드롭다운은 닫혔을 때 필드에 자리 표시자 텍스트를 표시해요. 닫힌 필드를 활성화하면 옵션 메뉴가 열립니다.
각 옵션에는 옵션 텍스트 왼쪽에 체크박스 입력이 있어요.
옵션이 선택되는 동안 메뉴는 열린 상태로 유지됩니다. 메뉴는 필드를 클릭하거나 드롭다운 밖을 클릭하거나, Esc를 누르거나 컴포넌트에서 탭으로 벗어나면 닫힙니다.
Default
Fluid

피드백 (Feedback)

메뉴에서 옵션이 선택되면 필드의 텍스트 왼쪽에 선택된 옵션의 총 개수를 포함하는 태그가 나타나고, 선택된 모든 옵션을 지우는 기능도 제공합니다.
자리 표시자 텍스트는 선택된 것을 더 잘 반영하는 텍스트로 바뀔 수 있어요.
선택된 옵션은 메뉴를 닫았다 다시 방문할 때 영숫자 순서로 메뉴 상단으로 이동합니다.
드롭다운과 콤보 박스와 달리, 사용자가 선택을 해도 메뉴는 닫히지 않아요. 다중 선택이 가능하므로 사용자는 드롭다운 밖이나 부모 요소를 클릭해 메뉴를 닫아야 합니다.
Default
Fluid

모두 선택 (Selecting all)

부모 옵션과 연결된 부모 체크박스는 목록의 모든 옵션을 선택할 수 있게 해줘요. 부모 체크박스 요소는 멀티셀렉트 드롭다운에만 사용되지만, 모든 멀티셀렉트 드롭다운에 반드시 있어야 하는 것은 아닙니다.

부모 옵션의 하단 획(stroke)은 패딩이 없으며 드롭다운 메뉴의 끝까지 퍼집니다.
all 버튼의 배경 채움은 선택되어도 변하지 않으며 enabled 상태와 같은 배경을 계속 가집니다.

부모 체크박스에는 세 번째 비결정(indeterminate) 상태가 있으며 일부(전부는 아닌) 옵션이 선택되었을 때 나타납니다.

비결정 상태를 클릭하면 모든 옵션이 지워집니다.
선택되지 않은 체크박스를 클릭하면 모든 옵션이 선택됩니다.
선택된 체크박스를 클릭하면 모든 옵션이 지워집니다.

필터처럼 모두 선택과 모두 선택 안 함이 같은 것을 의미하는 시나리오에서는 부모 체크박스를 사용하지 않는 것을 권장합니다.

모두 지우기 (Clearing all)

목록에서 선택된 모든 옵션을 지우려면 필터 가능한 태그를 호버하고 값 옆의 "x"(또는 close) 아이콘을 클릭하세요. 명확성을 돕기 위해 사용자가 "x" 아이콘을 호버하면 브라우저 툴팁이 나타나 클릭 동작 결과를 알려줍니다. 개별 옵션을 선택 해제하려면 각 옵션의 체크박스를 선택 해제하면 됩니다.

필터링 (Filtering)

긴 옵션 목록을 좁혀 선택하고 싶은 옵션을 찾으려면 필터링을 사용하세요.

기본적으로 필터 가능한 멀티셀렉트 드롭다운은 닫혔을 때 필드에 자리 표시자 텍스트를 표시해요.
필드를 호버하면 텍스트 커서가 나타납니다.
Default
Fluid
필드 어디든 클릭하면 메뉴가 열리고 입력을 시작하면 옵션 목록을 필터링할 수 있어요. 입력과 일치하기 시작하는 옵션은 목록에 남고, 다른 기존 옵션은 일시적으로 제거됩니다.
필드에 텍스트를 입력한 후에는 필드의 텍스트 오른쪽에 닫기(x) 아이콘이 나타나요. 이렇게 하면 필드에 입력된 텍스트가 지워집니다.
메뉴에서 옵션이 선택되면 필드의 텍스트 왼쪽에 선택된 옵션의 총 개수를 포함하는 태그가 나타나요. 자리 표시자 텍스트는 선택된 것을 더 잘 반영하는 텍스트로 바뀔 수 있습니다.
선택된 옵션은 영숫자 순서로 메뉴 상단으로 이동합니다.
기본 멀티셀렉트 드롭다운처럼, 사용자가 선택을 해도 메뉴는 닫히지 않습니다.
Default
Fluid

Combo box (콤보 박스)

사용자가 하나의 옵션을 선택해야 하지만 옵션 목록이 매우 길거나 사전 정의되지 않았을 수 있을 때 콤보 박스를 사용하세요. 콤보 박스는 사용자가 제안된 옵션 목록에서 선택하거나 자신의 사용자 정의 값을 입력할 수 있게 해줍니다. 목록을 채우는 데이터가 데이터베이스에서 올 수 있을 때 콤보 박스가 유용해요.

필드 어디든 클릭하면 메뉴가 열리고, 사용자가 입력하며 옵션 목록을 정렬할 수 있습니다. 사용자가 입력할 때 가장 잘 일치하는 옵션이 강조됩니다.
닫기(x) 아이콘은 입력을 지우고, 자동 완성은 사용자가 입력할 때 옵션을 정제합니다.
옵션을 선택하면 메뉴가 닫히고 선택된 옵션이 자리 표시자 텍스트를 대체합니다.
Default
Fluid

사용자 정의 값 입력 (Entering a custom value)

콤보 박스에서 사용자는 사전 정의된 옵션 목록에 없는 사용자 정의 또는 고유한 값을 입력할 수 있어요.

원하는 옵션이 목록에 없으면 필드에 직접 사용자 정의 값을 입력하기 시작하고, 입력하면서 옵션이 필터링됩니다.
새 사용자 정의 값을 저장하려면 마우스로 필드 밖을 클릭하거나 키보드로 Tab 또는 Enter를 누르세요.
저장되면 자리 표시자 텍스트가 입력한 사용자 정의 값을 표시하도록 바뀝니다.

수정자 (Modifiers)

Inline

다른 콘텐츠와 인라인으로 드롭다운을 배치할 때 inline 수정자를 사용하세요. 인라인 드롭다운에 시각적 라벨을 추가한다면 드롭다운의 왼쪽 인라인에 나타나야 해요. 시각적 라벨이 없다면 인라인 드롭다운에 적절한 접근성 라벨을 제공해야 합니다. 참고로 inline은 dropown과 multiselect 컴포넌트의 수정자일 뿐이며 필터링 기능을 포함하지 않습니다.

AI 존재 (AI presence)

드롭다운과 그 변형에는 입력에 AI 라벨이 있을 때 AI 시각적 스타일링을 취하는 수정(modification)이 있어요. 이 컴포넌트들의 AI 변형은 AI 라벨이 추가된 것 외에는 일반 버전과 동일하게 동작하며, AI 라벨은 시각적 표시이자 설명 가능성 팝오버의 트리거 역할을 합니다.

AI용 디자인에 대한 자세한 내용은 Carbon for AI 가이드라인을 참고하세요.

Default
Fluid

AI로 되돌리기 (Revert to AI)

드롭다운은 사용자 인터랙션에 따라 AI 변형과 비-AI 변형 사이를 전환할 수 있어요. 사용자가 AI가 제안한 콘텐츠를 수동으로 재정의하면 입력은 AI 변형에서 비-AI 변형으로 바뀝니다. 편집 후에도 사용자는 revert to AI 버튼을 통해 처음에 AI로 생성된 콘텐츠로 다시 전환할 수 있어야 해요.

Default
Fluid

체크박스 (Checkbox)

체크박스는 목록에서 선택할 여러 옵션이 있을 때 사용돼요. 사용자는 0개, 1개, 또는 원하는 개수만큼 옵션을 선택할 수 있습니다. 자세한 지침은 Carbon의 checkbox를 참고하세요.

폼 (Form)

폼은 사용자가 데이터를 제공하거나 옵션을 구성할 수 있게 하는 관련 입력 컨트롤 그룹이에요. 자세한 지침은 Carbon의 form을 참고하세요.

라디오 버튼 (Radio button)

라디오 버튼은 상호 배타적 선택의 그룹이 있고 그룹에서 하나만 선택이 허용될 때 사용돼요. 자세한 지침은 Carbon의 radio button을 참고하세요.

select

Dropdown 대 Select (Dropdown versus Select)

Dropdown과 select 컴포넌트는 기능과 스타일이 달라요.

드롭다운 컴포넌트의 기본 코드는 디자인 시스템에 맞게 스타일링되지만, select 컴포넌트의 모양은 사용 중인 브라우저에 의해 결정됩니다.
폼에서 드롭다운 컴포넌트를 사용해 한 번에 여러 옵션을 선택하고 페이지의 콘텐츠를 필터·정렬하세요. select 드롭다운에는 필터링이나 멀티셀렉트 기능이 없습니다.
경험의 대부분이 폼 기반이라면 select 드롭다운 컴포넌트를 사용하세요. 이러한 상황에서 사용자 정의 드롭다운을 사용할 수 있지만, 데이터를 제출할 때 네이티브 select가 네이티브 폼과 더 쉽게 동작합니다.
경험이 모바일에서 자주 사용될 것이라면 select 드롭다운 컴포넌트를 사용하세요. 네이티브 select 드롭다운은 플랫폼의 네이티브 컨트롤을 사용해 사용하기 더 쉽습니다.

Dropdown 대 Combo box (Dropdown versus Combo box)

드롭다운과 콤보 박스는 비슷해 보이지만 기능이 다릅니다.

드롭다운 목록에서는 선택된 옵션이 항상 보이고, 다른 옵션은 목록을 클릭·열어 볼 수 있어요.
콤보 박스는 표준 리스트 박스 또는 드롭다운 목록의 조합으로, 사용자가 입력 필드 안에 입력해 입력된 값과 일치하는 옵션을 찾을 수 있게 해줍니다.

참고 자료 (References)

Angie Li, Dropdown: Design Guidelines (Nielsen Norman Group, 2017)

더 알아보기 (Learn more)

드롭다운은 옵션 선택과 필터·정렬을 위한 유연한 입력 컴포넌트예요. 하나만 고를 때는 dropdown, 여러 개는 multiselect, 큰/미정의 목록이나 직접 입력이 필요하면 combo box를 쓰세요. 한 페이지의 폼 컴포넌트 크기를 일관되게 유지하고, 옵션이 두 개뿐이면 라디오 버튼을 대신 고려하세요.