Multi Select Chips
Picked options become chips in the row above the list, and the chips already there slide over to take each new one in.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useId, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Multi Select Chips
*
* Options picked from the list below turn into chips in the row above it.
* A new chip rises into the row and the chips already there slide over toAbout this pattern
A multi-select is only usable when the answer so far is visible without scrolling back, so every pick leaves the list and appears as a chip in the row above it. The new chip rises the short distance it travelled and the chips beside it slide over to make the space, using position-only layout — the box is never interpolated, so the label inside a chip is never stretched. Removing one closes the gap by the same motion, and the row keeps its height when empty so the list below never shifts under the pointer as the first chip lands.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Issue tracker
Chosen labels gather as chips while the option list stays open.