Tag picker
Tag picker (태그 피커)
태그 피커는 텍스트 입력 박스와 드롭다운을 결합해서, 사람들이 목록에서 옵션을 선택하거나 직접 자신의 선택을 입력할 수 있게 해 주는 요소예요. 선택된 항목은 tag로 표현돼요. 파일·사람·회의 같은 대상을 골라 태그로 담는 입력 방식이라고 보면 쉬워요.
출처: Tag picker 문서
본문
Behavior (동작)
Selecting from a dropdown (드롭다운에서 선택)
사용자가 태그 피커를 클릭하면, 사용자가 고를 수 있는 항목 목록을 보여주는 드롭다운이 열려요. 이 항목들은 시스템이 제공하며 파일, 사람, 회의를 나타낼 수 있어요. 목록 항목 중 하나를 클릭하면 드롭다운이 닫히고 입력 박스에 선택을 보여주는 태그가 삽입돼요.
Type to filter and select (입력으로 필터링·선택)
사용자는 입력 박스에 포커스가 있을 때 타이핑해서 목록을 자신이 찾는 것과 정확히 일치하도록 필터링할 수 있어요. Active descendant는 항상 첫 번째 항목에 머물며, 사용자가 입력한 것에 가장 가까운 일치 항목이 돼요. Enter를 누르면 첫 번째 항목이 선택되는데, 사용자가 위·아래 화살표 키로 목록을 이동했다면 그에 따릅니다.
Secondary action (보조 액션)
태그 피커는 필요할 때 추가 기능을 위한 보조 액션 슬롯을 제공해요. 예를 들어 입력 박스 안의 태그를 모두 지우는 "Clear all" 옵션이 있을 수 있어요.
Layout (레이아웃)
Wrapping tags (태그 줄바꿈)
기본적으로 입력 박스에 삽입된 태그는 줄바꿈되며 콘텐츠에 맞게 높이가 커져요. 태그 안의 텍스트 자체는 잘릴(truncate) 수 있지만, 제품마다 의견(opinion)이 강하게 갈리는 부분이라 기본 제공되지는 않아요.
Truncating text in tags (태그 안의 텍스트 잘림)
더 많은 콘텐츠를 담기 위해 잘림이 필요하다면 최대 너비를 지정해서, 태그 안의 텍스트가 그 너비를 초과하면 잘리게 할 수 있어요.
Accessibility (접근성)
Provide a clear name for the input (입력 박스에 명확한 이름 제공)
TagPickerInput에 aria-label을 사용해 입력 박스에 접근 가능한 이름을 제공하세요. 이 속성은 화면 낭독기가 입력 박스의 목적을 이해하게 도와줘요.
Deletion interaction (삭제 상호작용)
TagPickerInput에 포커스가 있을 때 Backspace를 누르면 마지막 태그가 제거돼요. 이 동작은 혼란을 피하기 위해 사용자에게 알려야 해요.
