Combo Box Usage
텍스트 필드와 그 아래에 나타나는 선택지 메뉴로 구성되어 있습니다. 사용자가 원하는 선택지를 검색하고 선택할 수 있도록 합니다.
Layout
Spacing
필드는 텍스트 레이블과 spacing/100 간격을 두고 배치합니다. 필드와 validation message 또는 helper text 와의 간격에는 spacing/50을 적용합니다.
Content
Menu
Combo box를 클릭하면 열리는 메뉴는 필드와 동일한 사이즈를 조합하여 사용합니다.
필드와 메뉴의 사이즈를 다르게 사용하지 않습니다.
Optional Field
입력 여부가 선택 사항인 경우에는 텍스트 레이블 뒤 (optional) 접미사를 붙입니다. 선택 입력 필드의 경우 입력 값이 비어있어도 form 제출이 가능합니다.
필수 입력 필드와 달리, 선택지에 No Selection 항목이 함께 노출되어 빈 선택 값을 남겨둘 수 있습니다.
Caption
캡션이 있는 선택지를 선택할 경우, 필드 내부에서는 캡션 내용이 노출되지 않습니다.
Behaviors
Input Validation
입력 내용이 조건을 만족시키지 못 하는 경우 필드가 error state로 표현될 수 있습니다. 이 때, error 타입 validation message를 함께 노출하여 사용자가 상황 맥락을 이해할 수 있도록 합니다.
Filtering
키워드에 기반한 선택지 필터링이 가능합니다. 검색할 때 입력어를 포함한 항목들이 바로 선택지로 반영됩니다.
Multiple Selection
다중 선택지를 표현하는 칩은 필드가 열린 경우에만 제거 버튼을 노출합니다.
필드 내부에 담길 수 있는 길이를 초과하였을 때 counter label을 활용합니다. 생략되어 노출되지 않는 항목은 counter label 위 커서를 올려 tooltip으로 확인할 수 있습니다.
닫힌 필드 내부에는 선택된 항목이 최소 하나는 노출되어야 합니다. Chip의 최대 너비는 컨테이너 너비의 60%로 적용하며, 항목의 내용이 긴 경우 텍스트를 truncate 하여 한 줄까지 노출합니다.
선택된 항목이 두 줄을 초과하는 경우, 필드 포커스 상태에서 높이 값이 늘어나도록 처리합니다. Max-heigh는 24vh로 적용됩니다. Max-height 도달 시 가장 마지막에 선택된 항목이 완전히 보이도록 자동 스크롤이 적용됩니다.
Add New
입력된 키워드를 포함한 결과 값이 없는 경우, 신규 항목을 추가할 수 있도록 제공할 수 있습니다. 신규 항목 추가는 단일 선택지에서만 제공합니다.
입력된 키워드에 정확히 매치된 항목이 없을 때는 add new 선택지를 제공합니다. Add new 항목을 선택하면 필드 우측 내부에 Add New라고 표기됩니다. 신규 항목은 form 제출 시 추가됩니다.
신규 항목에 입력 길이 제한이 필요한 경우, add new 선택지를 letter count와 함께 제공할 수 있습니다. 필드에서 입력 길이 제한은 없지만, add new 선택지에서는 제한된 길이로 잘린 텍스트가 보여지며 정제된 길이로 신규 항목이 생성됩니다.
