다중 선택·선택 칩

목적과 사용

여러 항목을 고르고 검색·개별 해제로 수정합니다. TeamWicked와 WickedHost의 공통 행동 규칙으로 재사용하되 각 체계의 토큰을 적용합니다.

구성과 변형

• 선택 없음
• 여러 선택
• 검색
• 결과 없음
• 개별 해제

보여 주는 형태는 해당 제품 토큰으로 구성한 문서용 예제입니다. 별도 원본 연결 표시가 없으면 운영 컴포넌트를 그대로 복제했다는 의미가 아닙니다.

동작 규칙

• MUL-01 MUST: 검색 필터가 바뀌어도 기존 선택을 잃지 않습니다.
• MUL-02 MUST: 선택 해제 버튼은 지울 항목 이름을 접근 가능한 이름에 넣습니다.
• MUL-03 MUST: 일부 선택과 전체 선택의 상태를 혼동하지 않습니다.
• MUL-04 MUST: 선택 개수와 선택된 값을 함께 확인할 수 있게 합니다.

콘텐츠 예시

예제 이름·주소·금액은 실제 고객 데이터가 아닙니다. example.test, 개발 서버, 예제 계정처럼 목적이 분명한 가상 자료를 사용합니다. 실제 권한·저장·전송이 완료되었다고 오해할 문구는 사용하지 않습니다.

우리 구현과 연결

web/expanded-specimens.tsx의 실행 코드와 이 페이지의 구현 코드 탭이 같은 함수를 사용합니다. 공통 요소는 web/primitives.tsx, 스타일은 web/expanded-specimens.css에서 관리합니다. 공통 행동 규칙과 시각 토큰을 구분하고, 같은 이름의 운영 구현과 props 계약이 같다고 가정하지 않습니다.

상태와 검증

선택 후 검색을 바꾸고 칩에서 하나만 해제해 나머지 선택이 보존되는지 확인합니다.

라이트·다크 / desktop·mobile / 키보드 / 빈 값·긴 값 / 권한·실패 / 데이터 변경 요청 없음에 대한 증거를 기록합니다. 제품의 실제 업무 성공이나 전체 WCAG 준수 여부는 별도 검증입니다.