Dropdown

Dropdown은 사람들이 목록에서 하나 이상의 옵션을 선택할 수 있게 해 줘요. 옵션에 커스텀 스타일링이 필요한 폼에서 정보를 수집하거나, UI에서 정보를 필터링하고 정렬할 때 사용할 수 있어요.

폼을 설계할 때, 특히 모바일 플랫폼에서는 접근성이 기본 내장된 select를 고려해 보세요. 보이는 필드에 직접 타이핑해서 자유 형식 답변을 제출하거나 목록을 필터링해야 한다면 combobox를 시도해 보세요.

출처: Dropdown 문서

본문

Behavior (동작)

Placeholder text and default selection (플레이스홀더 텍스트와 기본 선택)

placeholder prop을 설정하지 않으면 드롭다운은 선택이 이루어질 때까지 빈 상태로 표시돼요. 플레이스홀더 텍스트는 드롭다운의 옵션을 이해하는 데 도움이 되는 추가 힌트로 사용하세요. 드롭다운을 라벨링하는 데는 사용하지 마세요.

플레이스홀더 텍스트 대신 기본 선택을 표시하려면 defaultSelectedOptions prop을 사용하세요.

Single select dropdowns (단일 선택 드롭다운)

닫힌 필드를 선택하면 옵션 목록이 열려요. 목록에서 옵션을 선택하면 필드가 닫히고 선택한 텍스트가 플레이스홀더 텍스트를 대체해요.

Multi-select dropdowns (다중 선택 드롭다운)

다중 선택 상호작용에서는 각 목록 항목에 체크박스가 함께 표시돼요. 목록에서 클릭해 이탈하거나 Esc를 누르기 전까지 옵션 목록은 닫히지 않아요. 선택한 텍스트는 플레이스홀더를 대체하지만, 선택 항목이 컨테이너 폭을 초과하면 필드에는 선택된 옵션 수가 표시돼요. 다중 선택을 활성화하려면 multiselect prop을 true로 설정하세요.

Accessibility (접근성)

The `text` prop

복잡한 옵션, 특히 JSX를 포함하는 옵션에는 text prop을 사용해 문자열 값을 정의하세요. text prop을 설정하면 사람들이 문자나 문자열을 타이핑해 일치하는 옵션을 찾아 드롭다운 옵션을 탐색할 수 있고, 선택이 이루어진 후 닫힌 드롭다운이 올바른 데이터를 표시할 수 있어요.

Optimize for screen readers (스크린 리더 최적화)

가능하면 inlinePopup을 true로 설정해 VoiceOver 지원을 개선하세요. inlinePopup prop은 listbox 팝업이 DOM에서 버튼 바로 뒤에 렌더링되게 해요. Safari는 aria-owns를 지원하지 않으므로, 이 설정으로 iOS VoiceOver의 버튼과 옵션 사이 스와이프 탐색이 가능해져요.

Content (콘텐츠)

사람들이 메뉴에서 무엇을 찾을 수 있는지 알려주는 설명적인 라벨을 사용하세요. 단일 단어나 짧은 문구가 가장 좋아요.

드롭다운 옵션은 평행 구조(parallel construction)로 작성하세요. 예를 들어 모두 명사이거나 모두 동사로 쓰되, 각 옵션의 시작 부분에 같은 단어나 문구를 반복하지 마세요. "none"이 옵션이라면 포함하세요.

문장형 대문자 표기(sentence style capitalization)를 사용하세요 — 첫 단어만 대문자로 써요. 자세한 내용은 Microsoft Writing Style Guide의 Capitalization를 참고하세요.

더 알아보기 (Learn more)

Dropdown 스토리북 및 React/Web Components 가이드 확인
폼에는 select, 자유 형식 입력·필터링에는 combobox를 함께 고려하세요
Microsoft Writing Style Guide: Capitalization