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 box A text box also called an input box, text field or text entry box, is a control element of a graphical user interface, that should enable the user to input text information to be used by a program. Human Interface Guidelines recommend a single ...

es. 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 Material Design (codename Quantum Paper) is a design language developed by Google in 2014. Expanding on the "cards" UI that debuted in Google Now, Material Design uses more grid-based layouts, responsive animations and transitions, padding, an ...

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 for web development and software applications to manage discrete items or selections, such as "tags" in the Carbon Design System, "pills" in

Salesforce Salesforce, Inc. is an American cloud-based software company headquartered in San Francisco, California. It provides applications focused on sales, customer service, marketing automation, e-commerce, analytics, artificial intelligence, and ap ...

's Lightning design system, and "lozenges" in the

Atlassian Atlassian Corporation () is an Australia, Australian-United States, American proprietary software company that specializes in collaboration tools designed primarily for software development and project management. Domicile (law), Domiciled in ...

design system.{{Cite web , title=Lozenge , url=https://atlassian.design/components/lozenge/examples , access-date=2024-08-29 , website=Atlassian Design System

Use cases

Chips are commonly used in the following scenarios: ;Labels :Represent categories or

metadata Metadata (or metainformation) is "data that provides information about other data", but not the content of the data itself, such as the text of a message or the image itself. There are many distinct types of metadata, including: * Descriptive ...

blog A blog (a Clipping (morphology), truncation of "weblog") is an informational website consisting of discrete, often informal diary-style text entries also known as posts. Posts are typically displayed in Reverse chronology, reverse chronologic ...

posts, emails, or

social media Social media are interactive technologies that facilitate the Content creation, creation, information exchange, sharing and news aggregator, aggregation of Content (media), content (such as ideas, interests, and other forms of expression) amongs ...

platforms. ;Filters :Allow users to apply or remove filters in query and 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 A drop-down list (DDL), drop-down menu or just drop-down – also known as a drop menu, pull-down list, picklist – is a graphical control element, similar to a list box, that allows the user to choose one value from a list either by clicking ...

or email recipients, allowing users to add or remove them with ease. ;

Hyperlink In computing, a hyperlink, or simply a link, is a digital reference providing direct access to Data (computing), data by a user (computing), user's point and click, clicking or touchscreen, tapping. A hyperlink points to a whole document or to ...

s with enhanced functionality :In

Google Docs Google Docs is an online word processor and part of the free, web-based Google Docs Editors suite offered by Google. Google Docs is accessible via a web browser as a web-based application and is also available as a mobile app on Android and iO ...

, links to another document or

user account A user is a person who uses a computer or network service. A user often has a user account and is identified to the system by a username (or user name). Some software products provide services to other systems and have no direct end use ...

may be automatically converted to a chip.

Implementation

Chips are implemented using a combination of

HTML Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets ( ...

, CSS, and

JavaScript JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior. Web browsers have ...

for web interfaces. In

mobile app A mobile application or app is a computer program or software application designed to run on a mobile device such as a smartphone, phone, tablet computer, tablet, or smartwatch, watch. Mobile applications often stand in contrast to desktop appli ...

development, chips are often part of standard component libraries available in frameworks like Android’s Material Components or

Apple An apple is a round, edible fruit produced by an apple tree (''Malus'' spp.). Fruit trees of the orchard or domestic apple (''Malus domestica''), the most widely grown in the genus, are agriculture, cultivated worldwide. The tree originated ...

’s

Cocoa Touch UIKit is an application development environment and graphical user interface toolkit from Apple Inc. used to build apps for the iOS, iPadOS, watchOS, tvOS, and visionOS operating systems. UIKit provides an abstraction layer of iOS, the ...

References

Graphical control elements