Combobox
Combobox (콤보박스)
콤보박스는 목록에서 하나 이상의 옵션을 선택하거나, 연결된 입력란(input)에 텍스트를 입력하는 컴포넌트예요. 텍스트를 입력하면 옵션을 필터링하거나 자유 형식 답변을 제출할 수 있죠.
출처: 문서
본문
콤보박스는 목록에서 하나 이상의 옵션을 고르거나 연결된 입력란에 텍스트를 입력하는 데 사용해요. 텍스트를 입력하면 옵션이 필터링되거나 자유 형식 답변을 제출할 수 있어요.
콤보박스는 옵션 목록이 매우 길 때 잘 동작해요. 목록이 길지 않거나 자유 형식 답변을 받을 수 없다면 드롭다운이나 셀렉트(select)를 시도해 보세요. 도움말 텍스트와 검증 스타일을 포함한 표준화된 폼 컴포넌트가 필요하다면 combobox 필드 컴포넌트를 사용하세요.
Behavior (동작)
플레이스홀더 텍스트와 기본 선택
placeholder prop을 설정하지 않으면 콤보박스는 선택이 이루어질 때까지 비어 있는 상태로 보여요. 플레이스홀더 텍스트는 콤보박스에 어떤 옵션이 있는지, 필드에 무엇을 입력할 수 있는지 이해하는 데 도움을 주는 추가 힌트로 사용하세요. 플레이스홀더 텍스트로 콤보박스를 라벨링하지 마세요.
플레이스홀더 텍스트 대신 기본 선택을 표시하려면 defaultSelectedOptions prop을 사용하세요.
단일 선택 콤보박스
닫힌 필드를 선택하면 옵션 목록이 열려요. 목록에서 옵션을 고르면 필드가 닫히고, 선택한 텍스트가 플레이스홀더 텍스트를 대체해요.
다중 선택 콤보박스
다중 선택 상호작용에서는 각 목록 항목에 체크박스가 함께 표시돼요. 목록은 밖을 클릭하거나 Esc를 눌러 해제할 때까지 닫히지 않아요. 여러 항목을 선택할 수 있게 하려면 multiselect prop을 true로 설정하세요.
콤보박스 입력란은 항상 정보를 입력할 수 있게 하므로, 선택이 기본적으로 플레이스홀더 텍스트를 대체하지 않아요. 최상의 사용성을 위해 메뉴를 열지 않고도 사용자가 선택한 것을 보여주는 다른 방법을 구축하세요. 입력란에 선택 사항을 태그로 보여주는 방식이 그 예시예요.
필터링과 자유 형식 제출
콤보박스는 타이핑하면서 옵션 목록을 필터링할 수 있게 해 줘요. 사용자가 목록의 어떤 옵션과도 일치하지 않는 문자열을 입력하면, freeform prop을 사용해 자유 형식 항목을 제출하도록 허용할 수 있어요.
Accessibility (접근성)
text prop
text prop을 사용해 복잡한 옵션, 특히 JSX를 포함하는 옵션에 문자열 값을 정의하세요. text prop을 설정하면 사용자가 글자나 글자 문자열을 타이핑해 일치하는 옵션을 찾도록 내비게이션할 수 있고, 선택이 이루어진 후 닫힌 드롭다운이 올바른 데이터를 표시하게 보장돼요.
스페이스바로 선택하기
일반적으로 키보드로 내비게이션하는 사용자는 콤보박스에서 스페이스바를 사용해 선택을 할 수 있어요. 다만 목록의 어떤 옵션이 여러 단어로 이루어진 경우에는, 필터링할 때 공백을 문자열의 일부로 세는 것이 중요해요. 사용자가 키보드로 옵션을 탐색한다면, 스페이스바는 강조된 옵션을 선택해요.
화면 읽기 프로그램 최적화
가능하면 inlinePopup={true}를 설정해서 더 나은 VoiceOver 지원을 확보하세요. inlinePopup prop은 listbox popup이 DOM에서 버튼 바로 뒤에 렌더링되게 해요. Safari는 aria-owns를 지원하지 않으므로, 이렇게 하면 iOS VoiceOver 스와이프 내비게이션으로 버튼과 옵션 사이를 이동할 수 있어요.
Content (콘텐츠)
메뉴에서 무엇을 찾을 수 있는지 알려주는 설명적인 라벨을 사용하세요. 단일 단어나 짧은 구가 가장 좋아요.
드롭다운 옵션은 평행 구조(parallel construction)로 작성하세요. 예를 들어 전부 명사 또는 전부 동사로 쓰되, 각 옵션의 시작에 같은 단어나 구를 반복하지 마세요. '없음(none)'이 옵션이라면 포함시키세요.
문장식 대문자 규칙(sentence-style capitalization)을 사용해서 첫 단어만 대문자로 써요. 자세한 내용은 Microsoft Writing Style Guide의 Capitalization 항목을 참고하세요.