Combobox Filter Narrow
Typing fades out the options that no longer match while the survivors slide up.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Combobox Filter Narrow
*
* Typing narrows the list instead of redrawing it: options that no
* longer match fade where they stand, the ones that survive slide upAbout this pattern
A picker that narrows instead of redrawing. Every option keeps its own element for the whole session, so a keystroke moves rows rather than tearing them out and inserting new ones: a row that stops matching fades where it stands, the ones that survive travel up into the gap on a tightly damped spring, and the panel eases to its new length. Rows are laid out by transform alone and never resize, so no label is ever stretched mid-move. Arrow keys, Enter and Escape all work, and the count of remaining options is announced.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Checkout
Country selection filters in place while the panel resizes to fit.
Related patterns
- Range Double HandleTwo handles bound a range and the fill between them tracks both, one-to-one under the pointer and settling on a spring from the keyboard.
- Select Dropdown OpenThe list unfolds under the field, options a beat behind the panel, current choice already marked.
- Search Input ExpandA search icon opens into a full field while the controls beside it give up the space.