Chip (GUI)

Editing the metadata of a function on Wikifunctions using Codex, the design system for Wikimedia projects. The aliases appear as chips.

A chip is an interactive graphical user interface element showing a mostly textual entity in a concise and manageable format. It mixes editable and read-only properties. Chips, also known as tags, pills, lozenges, and by some other names, are utilized in various software applications and web interfaces to display discrete pieces of information such as filters, categories, names of people or documents, or other user input.

Characteristics

Chips are designed to be small, interactive components that provide users with a way to display, select, or manage information efficiently.

Chips often appear in single-line or multi-line text boxes. They are compact and include text of the same or similar size as the rest of the text box, but the text in the chip is framed in a rectangular box, often with rounded corners. This design allows them to fit neatly into the rest of the text and, at the same time, show that the text is a single, distinct element.

In addition to the text, the chip usually includes an interactive element, such as a button, that allows its removal. It may also contain an icon or an avatar. For example, a chip with a user tag might include the user's name and a profile picture, or a filter chip might include a label and a small "x" to remove it.

Chips can be interactive, enabling users to click, drag, select, or delete them. This makes them useful for applications such as email clients (to display email recipients), search filters, and tagging systems.

History

The concept of chips in GUI design emerged as part of a broader trend towards minimalist and functional design elements that enhance usability and information management.

Chips were introduced as a formalized design element in the first version of Google's Material Design language in 2014. Material Design provided guidelines for chips, describing them as components that "represent complex entities in small blocks, such as a contact". Prior to Material Design, similar concepts existed in various forms, such as tags in the Carbon Design System, pills in Salesforce's Lightning design system, lozenges in the Atlassian design system used in web development and software applications to manage discrete items or selections.

Use cases

Chips are commonly used in the following scenarios:

Labels

Represent categories or metadata in blog posts, emails, or social media platforms.

Filters

Allow users to apply or remove filters in search interfaces, enhancing their functionality.

Input

Facilitate user input by displaying selected options, such as chosen skills, on a job application form or selected items in a multi-select dropdown menu or email recipients, allowing users to add or remove them with ease.

Hyperlinks with enhanced functionality

In Google Docs, links to another document or user account may be automatically converted to a chip.

Implementation

Chips are implemented using a combination of HTML, CSS, and JavaScript for web interfaces. In mobile app development, chips are often part of standard component libraries available in frameworks like Android’s Material Components or Apple’s Cocoa Touch.