Anatomy

Chips are made up of two key elements: a Container and a Label Text, and they may also include optional Leading and Trailing Icons. The dynamic states of the container effectively communicate the various statuses of the Chips. It's important for the Label Text to be concise and clear, while sharing the same typographic style as buttons. The Leading Icon, adaptable as a logo or image, assists in categorizing the Chip. Meanwhile, the Trailing Icon serves the purpose of either opening a menu or facilitating the removal of the Chips.

States

Chip typically exists in two primary conditions: default, representing its appearance before interaction, and selected, signifying its state post-interaction. Within these states, a Chip can exhibit various states such as enabled, hovered, focused, pressed, disabled, and dragged.

Enabled: This is the default state of Chips where they are fully interactive and responsive. In this state, users can interact with the Chips, such as clicking or tapping on them, to perform various actions like making selections or initiating commands. The enabled state signifies that the Chip is active and available for interaction.

Hovered: Specific to web applications, the hover state activates when a user places their mouse pointer over a Chip. It provides immediate visual feedback, often through changes in color, brightness, or elevation, indicating that the Chip is an interactive element. This subtle transformation guides users to understand that an action can be taken upon this element.

Focused: This state comes into play during keyboard navigation, commonly triggered by the 'Tab' key. When a Chip gains focus, it is visually distinguished - usually through an outline, glow, or color change - to show that it is currently selectable via keyboard. This state is vital for accessibility, ensuring that users who rely on keyboards for navigation can use the application effectively.

Pressed: The pressed state, also known as the mouse-down state, is activated when the user clicks or taps on a Chip. Visually, the Chip may appear to be depressed or highlighted, simulating a physical button being pressed. This provides tactile feedback to the user, indicating that their interaction is recognized and an action is being initiated.

Disabled: In certain scenarios, a Chip might be in a disabled state, signifying that it is currently non-interactive. Visually, disabled Chips are often grayed out or appear muted. This state is particularly useful for indicating to users that certain actions or choices are not available under the current conditions or settings.

Dragged: While not as common as the other states, some Chips can be draggable, entering a dragged state when a user clicks and holds to move them. This state may involve visual changes like a shadow or change in elevation to indicate that the Chip is being moved.

Behavioral

When interacted with, a Chips component visually indicates its selection through a change in color, elevation, or the addition of an icon. In multi-select scenarios, tapping a Chips toggles its active state. For Chips with a close icon, clicking this icon removes the Chips, often with an accompanying animation. These responsive behaviors provide immediate feedback, making user interactions feel intuitive and fluid.

Usage

Chips facilitate data entry, selection processes, content filtering, and action initiation. Their primary function is to streamline and expedite the user's current tasks. Chips should be contextually dynamic, presenting themselves as a cohesive cluster of interactive elements that respond to the user's needs and actions.

Filtering

Chips facilitate content filtering by allowing users to select multiple filter options simultaneously. They provide a convenient approach to narrowing down content or choices. Acting as visual indicators, they display each selected filter in a brief, easily identifiable format.

Consider an e-commerce marketplace platform focusing on electronics. Chips representing price, brand, and store enable users to filter options. For example, selecting Chips for a '$500–1000' price range, 'DJI' brand, and 'Walmart' store immediately refines the product listings to match those criteria.

Multi-select

Chips are excellently suited for instances where a user needs to make selections from a predefined list of options. Chips help narrow down user intentions by presenting dynamically generated suggestions, such as possible responses or search filters.

Consider a project management app, where Chips can be utilized for multi-select purposes, especially in assigning team members to tasks. For example, when creating a new task, a project manager might need to assign it to several team members. Each team member can be represented as a Chip that appears near the input field for names. Chips can dynamically change based on what the user types into the search bar.

Action

Chips are designed not only for filtering, multi-select, or tagging, but they can also initiate actions, dynamically offering users quick choices of related actions in the right context.

For example, in a mobile mapping application, Chips can be used to initiate searches. Imagine a user planning a trip and looking for destinations. The app could display Chips with various categories, such as 'Beaches', 'Cafes', 'Shops', 'Cultural Sites', 'Pharmacies' or 'Gas Stations'. Pressing the 'Shops' Chip instantly triggers a search or filters the list of destinations, displaying only travel options related to shopping, simplifying and speeding up the search process.

Chips vs Segmented control

Segmented controls and Chips, although they share similar functionalities, differ in their design and user interaction. Segmented controls suggest exclusivity in choice - a user understands that only one option can be selected at a time. The design of Segmented controls becomes limiting when dealing with a larger number of options or considering factors such as character count, localization, and accessibility features.

Chips, on the other hand, present each option separately, indicating the possibility of multiple selections. Chips are more adaptable in scenarios requiring a greater number of options or longer text strings. For example, when an application needs to present more than three choices or accommodate lengthy option names, using a scrolling or clustered single-select Chips layout becomes a more user-friendly and accessible solution.

For instance, imagine a lodging booking application where users need to choose the Type of place, the number of Rooms and beds, and the Property type. There are only three options for Type of place and they are exclusive; you can't select Any type and Room, so Segmented controls are used in this case. For choosing the number of Rooms and beds and Property type, Chips is a more convenient option, as there are many options and several can be selected at once. Thus, in this case, Segmented controls and Chips do roughly the same thing by filtering the amount of suitable housing, but they look and interact with the user differently.

Best practice

Ensure Chips are easily clickable or tappable with optimal size and spacing. Enhance their design with clear hover and active states for instant feedback. Use distinct visual cues to differentiate between selected and unselected Chips. Incorporate a prominent, intuitive close icon for easy deselection. Boost engagement with visual feedback like animations and color shifts for Chip interactions, reinforcing user actions and improving interface responsiveness.

To delve deeper into best practices and real-world examples, take a look at the Chips in Design Systems from leading design teams and top tech companies.