Chip

Approved — Ready for dev

Chips allow users to perform a variety of actions throughout the platform while utilizing a low-emphasis, compact design. Chips represent actions, inputs, and selections.

Chip

Anatomy

The chip component is made up of a surface, a label, an optional leading icon (Avatar), and an optional trailing icon (Avatar or Quick Action Button). Chips come in four variants: selection chip, action chip, add chip, and the input chip.

Selection chip

The selection chip behaves in many ways identically to the traditional radio button or checkbox; allowing an either-or selection, or a multi-select from a list of chips. Once a selection is made, the trailing icon appears to provide an additional layer of system feedback.

  1. Surface/container
  2. Leading icon — Avatar (optional)
  3. Label — Caption 
  4. Trailing icon — Avatar

Action chip

The action chip behaves in many ways identically to the traditional button, allowing a way for the user to initiate an action or flow. Once a selection is made, the action is immediately initiated. The action chip is  meant to be a “no emphasis” level CTA.

  1. Surface/container
  2. Leading icon — Avatar (optional)
  3. Label — Caption

Add chip

The add chip behaves similarly to the action chip but has distinct on/off states similar to the selection chip. These states allow a user to add and remove items from the UI, including other chips or input fields.

  1. Surface/container
  2. Leading icon — Avatar (optional)
  3. Label — Caption 
  4. Quick action button

Input chip

The input chip behaves similarly to text fields, allowing a user to generate a unique input within a group of selection chips. For these chips, the trailing quick action button can be used to edit, confirm/submit the input, or delete chip. The trailing quick action button may change depending on the state to provide various interactions in one compact design.

  1. Surface/container
  2. Leading icon — Avatar (optional)
  3. Text input / Label — Caption 
  4. Quick action button (optional)

Chip groups

Chips often appear in groups. Depending on the context, chip groups may horizontally scroll/swipe or wrap. Chip groups can be either single-select or multi-select depending on the use case.

Scrollable/swipeable

Chip groups should be set to scroll/swipe in most cases. Specifically, scrollable/swipeable chip groups are best when it is not necessary to see all of the available chips at one time. Swipeable chip groups should always align to the left edge of the parent container, and overflow off the right side of the screen.

To ensure that the first chip in the chip group aligns to the rest of the content within the context, scrollable chip groups include an optional leading alignment spacer. This spacer may be sized according to the context using any of our systems spacing tokens, with a default spacing of Base. The leading alignment spacer should always be set to match the invisible keyline of the content above or below. 

The optional leading quick action button may be set to Scroll or Anchored. When set to anchored, the quick action button will not move when a user swipes—instead the chips will scale and fade to indicate that they are being scrolled beneath the quick action button (see Behavior) below.

Unique anchored behaviors

When a new chip is created using the anchored quick action button, the new chip will appear immediately next to the quick action button as either the first or last chip in the group. If the user has swiped the chip group, and the beginning or end is no longer visible, the group will automatically scroll to the beginning or end to reveal the newly added chip.

  1. Scrollable/swipeable chip group container 
  2. Leading alignment spacer (Optional)
  3. Leading or trailing quick action button (Optional)
  4. Trailing alignment spacer (Optional) (not shown above)

Wrapping

Chip groups should be set to wrap when it is necessary to see all, or most, of the available chips at one time. Whenever a wrapping chip group is likely to exceed three full lines, the group may be appended with a“View more” action chip. The purpose of this extension is to give the user an option to expand a chip group to reveal more available actions. After the group has been expanded, the appended chip should change to a “View less” action chip.

  1. Wrapping chip group container
  2. Leading or trailing quick action button (Optional)
  3. Appended “View more” or “View less” chip (Optional)

Specs

Color

Element Property Value
Container (Static) Background color ∆colorBrandedAffordance100
Container (Hover) Background color ∆colorBrandedAffordance200
Container (Pressed) Background color ∆colorBrandedPressed
Container (Selected) Background color ∆colorBrandedSelected
Container (Error) Background color ∆colorBrandedError100
Label and avatar icons (Static, Hover) Color ∆colorBrandedAffordance900
Label and avatar icons (Pressed, Selected) Color ∆colorBrandedAffordanceOn
Label and avatar icons (Error) Color ∆colorBrandedError900
Container (Focused) Input chip only Background color ∆colorBrandedAffordance50
Label and avatar icons (Focused) Input chip only Color ∆colorBrandedAffordance900
Quick action buttons (Various) Color See Quick Action Button documentation
Container, label, avatar, and quick action button (Disabled) Alpha ∆colorPlatformAlpha75

Elevation

There are no elevation considerations for this component.

Spacing

Padding

To maintain a sense of balance in a chip with or without leading/trailing atoms, the padding within the content area of the chip changes slightly depending on whether or not an atom is used.

Internal spacing

Group spacing

States

Input chip

Theming

There are no additional theming considerations for this component.

Placement

Chips and chip groups should always be aligned according to the rest of the content in the area, reinforcing the overall alignment framework of the context. In most cases, this will mean that chips and chip groups should be left-aligned so as to reinforce the primary keyline.

Behavior

State change — Select/Add

To standardize all state changes throughout the various chip types, any token updates for the various state changes should follow these guidelines. When a state change adds a trailing atom, scale the entering atom using the animation guidelines below. Leading atoms should never be added or removed as a result of user interaction. When the icon within an atom changes, no animation is necessary.

Interaction Steps Duration Easing Notes Haptics
Select/add 1a. Chip resize ∆motionTimeExtraFast ∆motionTimingFunctionStandard    
  1b. State updates ∆motionTimeExtraFast ∆motionTimingFunctionStandard    
  1c. Trailing icon fades in 0–100% ∆motionTimeExtraFast ∆motionTimingFunctionStandard    
  1d. Trailing icon scales 64–100% ∆motionTimeFast ∆motionTimingFunctionStandard The icon scales in from its left-center anchor point.  

State change — Deselect/Remove

When a state change removes a trailing atom, scale the exiting atom using the animation guidelines below. Leading atoms should never be added or removed as a result of user interaction. When the icon within an atom changes, no animation is necessary.

Interaction Steps Duration Easing Notes Haptics
Deselect/Remove 1a. Chip resize ∆motionTimeExtraFast ∆motionTimingFunctionStandard    
  1b. State updates ∆motionTimeExtraFast ∆motionTimingFunctionStandard    
  1c. Trailing icon fades 100–0% ∆motionTimeNano ∆motionTimingFunctionStandard    
  1d. Trailing icon scales 100–64% ∆motionTimeNano ∆motionTimingFunctionStandard The icon scales in from its left-center anchor point.  

Input chips

New input chips are added to groups when the user taps the leading “Add” quick action button. As soon as the user taps the "add" QAB, the focus should shift to the new input label. The label should attempt to validate as soon as the focus leaves the newly created input. 

Additional actions

The trailing quick action button within the newly created chip may allow for edit, delete, or selection actions depending on the design. None of these actions require a special animation. 

Loading

If the chip will take longer than 400ms to validate the new input, a temporary trailing load icon should appear until validation is complete. The entry of the loader uses the same specs as the select/add behavior documented above.

Errors

If an error is present, the state should change—matching the guidance above—and the user should be notified of the error outside of the chip group (preferably using an inline notification). 

Anchored leading quick action button

When a scrollable/swipeable chip group has a leading quick action button set to Anchored, its position should remain the same despite the user’s swiping actions. Instead of swiping the quick action button out of view, the chips in the group will animate to imply that they are being hidden beneath the edge of the quick action button. When a chip appears, the same animation happens in reverse in time with the gesture.

When a new chip is created using the anchored quick action button, the new chip will appear immediately next to the quick action button as either the first or last chip in the group. If the user has swiped the chip group, and the beginning or end is no longer visible, the group will automatically scroll to the beginning or end to reveal the newly added chip.

Interaction Steps Duration Easing Notes Haptics
Hide chip beneath anchored QAB 1a. Chip scales 100–64% Time defined by gesture ∆motionTimingFunctionLinear The chip scales down as if dropping in z space below the quick action button.  
  1b. Chip fades 100–0% Time defined by gesture ∆motionTimingFunctionLinear Chip opacity transitions from 100% to 0%.  

Developer Docs

Vue Developer Docs

Component documentation coming soon!