Figma Chip List

Preview

Figma Chip List

Figma Chip List Component

ChipList is a component that manages multiple nested Chips. By adjusting the number of chips inside, you can add, remove, and filter content. Chip lists are part of Form elements that you can use to create filters, tags, or user selection forms.

Chip Lists UI Best Practices

Ensure chips are keyboard-navigable, screen-reader-friendly, and have sufficient contrast for readability;
Organize related chips logically and use spacing to avoid visual clutter;
Allow users to add, remove, or edit chips based on the context of the form input in which they are placed.

Chip List Anatomy

Set	Variants	Properties
ChipListMultiline	18	Type Default, UnboxedSize Small, Medium, LargeState Default, Focused, Typing
ChipList	18	Type Unboxed, DefaultSize Small, Medium, LargeState Default, Focused, Typing

ChipList and ChipListMultiline each ship 18 variants — Default and Unboxed types, Small 36, Medium 44 and Large 56px sizes, with Default, Focused and Typing states — managing nested removable chips for tags and filters.

Chip List AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a chip list input in Figma as two component sets. ChipList: a single-line input container holding nested removable chips followed by a text cursor, in Default type with a border and fill and Unboxed type with no container, at Small 36, Medium 44 and Large 56px heights, with three states — Default, Focused with an accent border, and Typing where placeholder text appears after the last chip. ChipListMultiline: the same container that wraps chips onto several lines and grows with content, same types, sizes and states. Build each chip as a nested instance with a label, an optional leading avatar or icon and a close icon, with Default and Hover states on the close target. Add a Chips property to show one to six chips and a Boolean for a clear-all icon on the right. Wire Default to Focused as an interactive component on click. Bind the container and chip colours to variables so the list works in light and dark mode for filters, tag fields and recipient pickers.

Source