Chip (GUI)

Un chip es un elemento de interfaz gráfica de usuario interactivo que muestra información mayoritariamente textual en un formato conciso y manejable. Combina propiedades de edición y de solo lectura. Los chips, también conocidos como etiquetas , píldoras o pastillas , se utilizan en diversas aplicaciones de software e interfaces web para mostrar información específica, como filtros, categorías, nombres de personas o documentos, u otros datos introducidos por el usuario.

Los chips están diseñados para ser componentes pequeños e interactivos que proporcionan a los usuarios una forma de mostrar, seleccionar o gestionar información de manera eficiente.

Los chips suelen aparecer en cuadros de texto de una o varias líneas . Son compactos e incluyen texto del mismo tamaño o similar al del resto del cuadro de texto, pero el texto del chip está enmarcado en un recuadro rectangular, a menudo con esquinas redondeadas. Este diseño permite que se integren perfectamente con el resto del texto y, al mismo tiempo, que se muestre que el texto es un elemento único y distinto.

Además del texto, el chip suele incluir un elemento interactivo, como un botón, que permite eliminarlo. También puede contener un icono o un avatar. Por ejemplo, un chip con una etiqueta de usuario podría incluir el nombre del usuario y una foto de perfil, o un chip de filtro podría incluir una etiqueta y una pequeña "x" para eliminarlo.

Los chips pueden ser interactivos, lo que permite a los usuarios hacer clic, arrastrar, seleccionar o eliminarlos. Esto los hace útiles para aplicaciones como clientes de correo electrónico (para mostrar los destinatarios), filtros de búsqueda y sistemas de etiquetado .

El concepto de chips en el diseño de interfaces gráficas de usuario surgió como parte de una tendencia más amplia hacia elementos de diseño minimalistas y funcionales que mejoran la usabilidad y la gestión de la información.

Los chips existían al menos desde Mac OS 10.4 (Tiger) en 2005, en forma de NSTokenField. ^{[ 1 ]}

Los chips se introdujeron como un elemento de diseño formalizado en la primera versión del lenguaje Material Design de Google en 2014. Material Design proporcionó directrices para los chips, describiéndolos como componentes que "representan entidades complejas en pequeños bloques, como un contacto". ^{[ 2 ]} Antes de Material Design, existían conceptos similares en diversas formas para el desarrollo web y las aplicaciones de software para gestionar elementos o selecciones discretas, como las "etiquetas" en el Carbon Design System , ^{[ 3 ]} las "píldoras" en el sistema de diseño Lightning de Salesforce , ^{[ 4 ]} y los "bloques" en el sistema de diseño de Atlassian . ^{[ 5 ]}

Los chips se utilizan habitualmente en los siguientes escenarios:

Etiquetas

Representar categorías o metadatos en publicaciones de blog , correos electrónicos o plataformas de redes sociales .

Filtros

Permitir a los usuarios aplicar o eliminar filtros en las interfaces de consulta y búsqueda , mejorando así su funcionalidad.

Aporte

Facilitar la introducción de datos por parte del usuario mostrando las opciones seleccionadas, como las habilidades elegidas en un formulario de solicitud de empleo o los elementos seleccionados en un menú desplegable de selección múltiple o los destinatarios del correo electrónico, lo que permite a los usuarios agregarlos o eliminarlos con facilidad.

Hipervínculos con funcionalidad mejorada

En Google Docs , los enlaces a otro documento o cuenta de usuario pueden convertirse automáticamente en un chip.

Los chips se implementan mediante una combinación de HTML , CSS y JavaScript para interfaces web. En el desarrollo de aplicaciones móviles , los chips suelen formar parte de las bibliotecas de componentes estándar disponibles en frameworks como Material Components de Android o Cocoa Touch de Apple .