E3.08.1chip multi-select with add removedesign

Chips fit multi-select that can grow and shrink

Aliases: choice chip · filter chip · dynamic tags

What it is

Chip selection (tags) turns chosen and choosable objects into small blocks that can be added and removed: tap to join, tap again or dismiss to leave, or pull a new block from suggestions. It fits multi-select whose membership will change during the task — interests, filters, visibility — not a static checklist ticked once. Dynamic means the set lengthens and shortens in this session, not that engineers might edit the option table later. Free-typed tags in an input are a different field; chips here are selection first, coining words only an optional extra.

Each chip is object and control at once: seeing it is seeing membership; acting on it changes membership.

Why it happens

Blocks spread the selected set in view. Add and remove are insert and delete on that set, not flipping booleans on a hidden roster. People understand object operations: a card appears on the table or is taken away. So adding needs a clear entry (suggestions, typing, picking from a pool), and removing must land on that block, not on a master list to untick.

Dynamic also wants stable identity. The same interest added twice should merge, not produce two chips named Photography. Suggestions should move with the selection (already-added items drop out, related ones rise) so adding always aims at “not yet in the set.” Static suggestions that still contain selected items turn insert into a toggle, and chips decay into odd-looking checkboxes.

Where it stops holding

When options are fixed and must be compared with long explanations (legal clauses, permissions), checkbox labels read better; chips shred the sentence. Exclusive choice should not be a row of light-up chips imitating segments: removing the current chip reaches empty, which a segmented control usually forbids. Filters that apply immediately often use chips; interest fields that wait for submit may too, but only with copy that save is still required, or add/remove will be read as already written. Hierarchy stuffed into flat chips loses levels; go back to a tree or a cascade.

Applying it

  • Use chips when membership must grow and shrink during the task; do not hide the set in a collapsed multi-select.
  • Give symmetric paths: join from suggestions, leave from the selected chip. Suggested items already in the set should vanish or take on the selected look.
  • One object, one chip; merge duplicates instead of stacking twins.
  • How to check: add three, remove one, ask a bystander who remains. If they cannot say, or they point at the removed chip, the blocks are not carrying membership.

Related

  • Within the group: E3.08.2 Chip wrapping causes layout jump · E3.08.3 The delete target on a selected chip must be large enough
  • Adjacent: E2.20 Tag Input · E3.06 Multi-Select Dropdowns · E3.01 Checkboxes
  • Search terms: choice chip · tag selection · add and remove chips

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/E3.08.1