20 Tailwind CSS Custom Selects

A custom select is a listbox, so it needs the roles native form controls give you for free. Put role="combobox" and aria-expanded on the trigger, role="listbox" on the panel, and role="option" with aria-selected on each row. The user avatar menu in Demo 05 and the language switcher in Demo 06 open on click, but a real select must also open on Enter, Space and Arrow keys, move a highlight with Up/Down, commit on Enter and close on Escape returning focus to the trigger. The product sort in Demo 12 already tracks the keyboard focus with its highlight bar, so wire the bar's index to a roving tabindex rather than to hover alone. Never leave the options as bare <div> elements a screen reader reads as plain text with no selected state.

Demo 04 and Demo 12 use one absolutely-positioned bar instead of toggling a background on each row. Every option row sets a custom property — the plan switcher reads --n as its index — and the bar is translated by calc(var(--n) * row-height), so moving selection just rewrites one number and the bar glides on a transition. The win is that five rows share one pill class list; you are not adding and removing an active class in JavaScript. The common bug is a jump on first paint: if the bar starts at translate zero before --n is set, it animates in from the top. Set the initial index inline on the panel and guard the transition with a class you add after the first frame, or the bar slides across the whole list every time the dropdown opens.

Demo 09 puts the chosen tags as chips inside the trigger itself and shows a count, and the checkbox tick is drawn entirely in utilities rather than a native input. The mechanism is one source of truth — an array of selected values — that renders both the chips in the field and the checked state of each row. Toggling a row pushes or splices that array, then you re-render chips and rewrite the count text. Two bugs bite here: removing a chip must also uncheck its row, so the chip's remove control has to mutate the same array the list reads, not a copy; and an empty selection should restore the placeholder, not leave a zero-width gap where chips were. For accessibility, mark the panel aria-multiselectable="true" and each row role="option" with aria-selected, because a checkmark alone is invisible to a screen reader.

Demo 08 offers Light, Dark and System, and the port makes a deliberate point: @theme in Tailwind is a build-time mint — it generates your utility classes and design tokens when the CSS compiles, so you cannot rewrite it in the browser to flip a theme live. The runtime switch has to run on CSS custom properties instead. Define your palette as variables on a root element, let the utilities reference those variables, and change the theme by setting a data-theme attribute or toggling a class that redefines the variables. The System option reads prefers-color-scheme through a media query. The trap is expecting @theme to behave like a live token store; if you try to mutate it after load nothing happens, and the selector looks broken while the compiled classes never change.

None of these panels close on their own; the open panels in Demo 01, Demo 05 and Demo 07 stay open until something toggles them shut. You need a document-level listener that closes the dropdown when a click lands outside both the trigger and the panel. The usual bug is that the same click which opens the menu immediately bubbles up to that document handler and closes it again, so the panel never appears. Fix it by checking whether the event target is contained inside your root element before closing, or stop propagation on the trigger. Also close on Escape and on selecting an option. For the scrollable workspace list in Demo 07, do not close on a scroll or on clicks inside the pinned Create workspace action — scope the outside check to the panel's bounding element, and remember to tear the listener down when the component unmounts or you leak handlers.

Reach for a native <select> when the options are plain text and the value is all that matters — a native control gives you keyboard support, mobile's built-in wheel picker, form submission and screen-reader semantics with zero code, and these ports cannot fully match the native mobile experience. Build a custom one only when the option needs rich content a native <option> cannot render: the flags in Demo 01, the currency symbols in Demo 02, the avatar rows in Demo 05, the per-row typefaces in Demo 14 or the hex swatches in Demo 16. Even then, keep a real hidden native input carrying the value so the field submits inside a <form> and validation still works. If your dropdown is really navigation — the account menu in Demo 05 — it is a menu, not a select, and should use links and role="menu", not option semantics.

Demo 16 avoids a class explosion by driving the swatch from a variable. Each row sets --c to its hex value, and the swatch element is a single bg-[var(--c)] — so one class list paints an unlimited palette because the color lives in the property, not the utility. Adding a color is adding a row that sets --c; you never touch the stylesheet. The same trick powers the font preview in Demo 14, where each row sets its own face and the trigger repaints from the chosen row. The pitfall is contrast: a light swatch on a light panel needs a ring or border so it does not vanish, and a hex you inject from user input must be validated before it reaches --c or a malformed value silently falls back to transparent. Give each option an aria-label with the color name, since a screen reader cannot announce a background color.

Demo 18 resolves the panel from blurred-and-small to sharp, and the rows cascade in behind it. The panel carries its closed and open geometry as utilities — a small scale, an opacity of zero and a blur in the closed state, transitioning to full scale and sharp when an open class is added, as Demo 01 does with its closed and open geometry. The spring feel comes from the timing function, not extra keyframes: a custom cubic-bezier that overshoots past one before settling reads as a spring. Demo 20's aurora uses a named --animate-tcs20-drift for the same reason. Two things to guard: set transform-origin toward the trigger so the panel grows out of the field instead of its own center, and wrap the motion in prefers-reduced-motion so users who opt out get an instant open with no scale or blur. Stagger rows with a per-row delay, but cap it or the last row lags noticeably.