Chip
Chip
Un chip es un pequeño elemento interactivo que representa una entrada, filtro, opción o elemento removible. Su acción exacta debe ser clara.
Un ejemplo real
Un comprador selecciona Talla M y En stock como filtros. Cada ficha muestra que está seleccionada y puede eliminar su propio filtro mediante teclado o puntero. Una etiqueta de categoría de solo lectura es una etiqueta, no una ficha.
Partes principales
- 01etiqueta de entidad
- 02estado de interacción
- 03acción de eliminación opcional
Úsalo cuando
Primero dice si el chip es una entrada, filtro, elección o acción. Luego dale el comportamiento correspondiente.
No lo uses cuando
No inventes un control general de pastillas cuando un botón, casilla de verificación o etiqueta explica mejor la acción.
Nombre usado en código
button or checkbox semantics in compact form Antes de lanzarlo
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 (Chip). User context: Un comprador selecciona Talla M y En stock como filtros. Cada ficha muestra que está seleccionada y puede eliminar su propio filtro mediante teclado o puntero. Una etiqueta de categoría de solo lectura es una etiqueta, no una ficha. Recommended pattern: Chip (Chip). Why it fits: Primero dice si el chip es una entrada, filtro, elección o acción. Luego dale el comportamiento correspondiente. Do not use it when: No inventes un control general de pastillas cuando un botón, casilla de verificación o etiqueta explica mejor la acción. 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): Es oficial para esa fuente. Otras plataformas o equipos pueden usar el término de otra manera. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Chip (Chip) is used now. Definition: Un chip es un pequeño elemento interactivo que representa una entrada, filtro, opción o elemento removible. Su acción exacta debe ser clara. 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.