Chip

한눈에#

assist·filter·input·suggestion 4변형의 상호작용 칩 체계(M3)입니다 — 변형마다 인터랙션 종류가 다릅니다.

사용 시점#

칩에 상호작용(액션·토글·제거·제안)이 있으면 Chip — 단순 라벨이나 단일 선택 필터 줄은 다른 컴포넌트입니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

import { Chip } from '@wds/ui-web';

<Chip>필터</Chip>

변형#

variant가 인터랙션 종류를 가릅니다.

• assist / suggestion: <button> + onClick. 작은 액션 버튼처럼 동작합니다(suggestion은 더 가벼운 아웃라인).
• filter: aria-pressed 토글 — 제어 selected 또는 비제어 defaultSelected + onChange(boolean), 선택 시 선행 체크 + primary 채움.
• input: 라벨 + 제거 <button>(aria-label, 기본 '제거') + onRemove. 칩 자체는 비-버튼입니다.

크기#

size로 2단 — md(기본)·sm.

상태#

filter는 비제어(defaultSelected)와 제어(selected)를 모두 지원합니다 — defaultSelected로 시작하면 컴포넌트가 선택 상태를 소유하고, selected를 주면 그 값이 진실의 원천이라 클릭은 onChange로만 통지합니다(소비자가 selected를 갱신해야 반영). disabled는 4변형 모두에서 상호작용을 차단합니다. Hover/Focus/Disabled는 CSS 의사클래스로 표현됩니다.

sm 인터랙티브 칩(assist·suggestion·filter 버튼, input 제거 버튼)은 시각 크기를 유지하면서 ::after로 히트 영역을 ≥44px까지 확장합니다(터치 타깃).

Props#

variant별로 허용되는 prop이 타입(판별 합집합)으로 강제됩니다 — 예: filter에 onRemove를 넘기면 컴파일 오류입니다.

접근성#

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).