Chip
칩
칩은 입력, 필터, 선택 또는 제거 가능한 항목을 나타내는 작은 상호작용 아이템입니다. 그 정확한 동작은 명확해야 합니다.
실제 예시
쇼핑객이 필터로 사이즈 M과 재고 있음(In stock)을 선택합니다. 각 칩은 선택되었음을 표시하며 키보드나 포인터로 자신의 필터를 제거할 수 있습니다. 읽기 전용 카테고리 레이블은 칩이 아니라 태그입니다.
주요 부분
- 01엔터티 레이블
- 02상호작용 상태
- 03선택적 제거 동작
사용할 때
먼저 칩이 입력인지, 필터인지, 선택인지, 행동인지 말하세요. 그런 다음 이에 맞는 동작을 부여하세요.
다음 경우에는 사용하지 마세요
버튼, 체크박스 또는 태그가 동작을 더 잘 설명할 때 일반적인 알약형 컨트롤을 발명하지 마세요.
코드에서 사용된 이름
button or checkbox semantics in compact form 출시하기 전에
Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery.
Outcome：Complete the task with 칩 (Chip)。 User context：쇼핑객이 필터로 사이즈 M과 재고 있음(In stock)을 선택합니다. 각 칩은 선택되었음을 표시하며 키보드나 포인터로 자신의 필터를 제거할 수 있습니다. 읽기 전용 카테고리 레이블은 칩이 아니라 태그입니다. Recommended pattern：칩 (Chip)。 Why it fits：먼저 칩이 입력인지, 필터인지, 선택인지, 행동인지 말하세요. 그런 다음 이에 맞는 동작을 부여하세요. Do not use it when：버튼, 체크박스 또는 태그가 동작을 더 잘 설명할 때 일반적인 알약형 컨트롤을 발명하지 마세요. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary)：해당 출처에 대해 공식적인 것입니다. 다른 플랫폼이나 팀은 그 용어를 다른 방식으로 사용할 수 있습니다. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how 칩 (Chip) is used now. Definition: 칩은 입력, 필터, 선택 또는 제거 가능한 항목을 나타내는 작은 상호작용 아이템입니다. 그 정확한 동작은 명확해야 합니다. Release checks: Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.