Vibary.ai
Go Pro
← Vibe Coding

Select Dropdown Open

The list unfolds under the field, options a beat behind the panel, current choice already marked.

formsminimalelegantinteraction · finite · intermediate · ~0.3s
Interactive · click to play
Variant

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.

338 lines · react + motion only
import { useEffect, useId, useRef, useState, type KeyboardEvent } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";

/**
 * Vibary · Select Dropdown Open
 *
 * The list unfolds under the field — panel first, options a beat behind
 * it in a short cascade — with the current choice already marked, so the

About this pattern

A replacement for the native select that keeps the native keyboard contract. The panel drops from just under the field and the rows follow it in a cascade short enough to feel like one movement, which gives the list a top and a bottom without anything having to scale — everything in a menu is text, and text that scales during an entrance smears. The current value is marked before the list settles, so the menu answers what the setting is now before it asks what it should be. Escape abandons, Enter commits, and focus returns to the field either way.

Settings selectFilter dropdownCountry or currency pickerScheduling form

Where it shows up

Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.

  • Add a supplierTwo fields now, the rest later
    Legal name
    Ridgeline Supply Co.
    Country
    Sweden
    VAT number
    SE556031820101
    Save supplier
    Form

    Opening onto the current value rather than onto the top of the list.

Related patterns