Select Usage

여러 선택 항목 중 개별 혹은 복수 선택지에 대한 단순 선택을 지원합니다.

Layout

필드는 텍스트 레이블과 spacing/100 간격을 두고 배치합니다. 필드와 validation message 또는 helper text 와의 간격에는 spacing/50을 적용합니다.

Select Layout Spacing

Select를 클릭하면 열리는 메뉴는 medium, small 두 사이즈로 제공됩니다. 필드와 동일한 사이즈를 조합하여 사용합니다.

메뉴의 min-height는 사이즈 별로 medium의 경우 44px, small은 40px을 각각 적용하며, max-height는 40vh로 동일합니다.

✕Don'tRequired

필드와 메뉴의 사이즈를 다르게 사용하지 않습니다.

입력 여부가 선택 사항인 경우에는 텍스트 레이블 뒤 (optional) 접미사를 붙입니다. 선택 입력 필드의 경우 입력 값이 비어있어도 form 제출이 가능합니다.

Select Content Optional Field

필수 입력 필드와 달리, 선택지에 No Selection 항목이 함께 노출되어 빈 선택 값을 남겨둘 수 있습니다.

Select Content Optional Field

캡션이 있는 선택지를 선택할 경우, 필드 내부에서는 캡션 내용이 노출되지 않습니다.

Select Content Caption

입력 내용이 조건을 만족시키지 못 하는 경우 필드가 error state로 표현될 수 있습니다. 이 때, error 타입 validation message를 함께 노출하여 사용자가 상황 맥락을 이해할 수 있도록 합니다.

Select Behaviors Input Validation

다중 선택지를 표현하는 칩은 필드가 열린 경우에만 제거 버튼을 노출합니다.

Select Behaviors Multiple Selection

필드 내부에 담길 수 있는 길이를 초과하였을 때 counter label을 활용합니다. 생략되어 노출되지 않는 항목은 counter label 위 커서를 올려 tooltip으로 확인할 수 있습니다.

Select Behaviors Multiple Selection

선택된 항목이 두 줄을 초과하는 경우, 필드 오픈 상태에서 높이 값이 늘어나야 합니다. Max-heigh는 24vh로 제한됩니다. Max-height 도달 시 가장 마지막에 선택된 항목이 완전히 보이도록 자동 스크롤이 적용됩니다.

Select Behaviors Multiple Selection

닫힌 필드 내부에는 선택된 항목이 최소 하나는 노출되어야 합니다. Chip의 최대 너비는 컨테이너 너비의 60%로 적용하며, 항목의 내용이 긴 경우 텍스트를 truncate 하여 한 줄까지 노출합니다.

Select Behaviors Multiple Selection