A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
Installation
Install the packages
Add the shadcn/ui component
Animate it
The CLI finds your shadcn/ui components through components.json, swaps their primitive imports for Animate UI's and removes the CSS animation classes Motion replaces.
Usage
Import from Animate UI instead of react-aria-components: it re-exports all of React Aria, with an animated Popover, ListBox, ListBoxItem, SelectionIndicator, TagGroup, TagList and Tag. Everything else stays the same.
import {
ComboBox,
Input,
ListBox,
ListBoxItem,
Popover,
SelectionIndicator,
} from '@animate-ui/react/primitives/react-aria';
const frameworks = [
{ id: 'next', name: 'Next.js' },
{ id: 'astro', name: 'Astro' },
{ id: 'sveltekit', name: 'SvelteKit' },
];
export function FrameworkPicker() {
return (
<ComboBox aria-label="Framework" defaultItems={frameworks}>
<Input placeholder="Search a framework…" />
<Popover placement="bottom start" offset={6}>
<ListBox>
{(item: (typeof frameworks)[number]) => (
<ListBoxItem id={item.id} textValue={item.name}>
{item.name}
<SelectionIndicator>✓</SelectionIndicator>
</ListBoxItem>
)}
</ListBox>
</Popover>
</ComboBox>
);
}Multiple selection
Check animation
The chosen item's check draws itself while the previous one erases itself. With animation="pop" on every item's SelectionIndicator, the check glides from the previous item to the chosen one instead (a first choice pops it in from half its size):
<ListBoxItem id={item.id} textValue={item.name}>
{item.name}
<SelectionIndicator animation="pop">✓</SelectionIndicator>
</ListBoxItem>With a multiple selection, each check pops in and shrinks back out on its own.
The same demo with checkAnimation="pop" (its Controls switch it back to draw):
To pop every check of your app at once (checkboxes, menus, selects, comboboxes), set checkAnimation="pop" on an AnimateUIProvider instead.
Animation
- Popover: React Aria's ComboBox has no Animate UI v1 counterpart. Its list opens in Animate UI's Popover, which moves like v1's Dropdown Menu content under a combobox: it fades and scales in from 0.9, from the input (
--trigger-anchor-point), in 220ms, and closes the same way before it unmounts. Reopening while it closes picks up from where it is. - Filtering while typing is instant: items appear and disappear on the next frame, with no per-item or height animation.
- ListBoxItem: one highlight glides behind the focused item (the one React Aria marks
data-focused) on a spring (stiffness 500, damping 40), following the pointer and the arrow keys alike, like v1's menu highlight and Base UI's Combobox. Moving to another item, it carries on from where it is, at its speed: however fast the pointer or the arrow keys go, there's one highlight on screen. It only fades in (200ms, on CSS'sease) when it appears from nothing, and its color changes the same way when the item's highlighted background differs from the previous one's. It glides on the compositor (a Web Animation oftransform), so a busy main thread, a heavy render for instance, doesn't stall it. When the pointer leaves the list, it stays on the last item. It wears the item's own focused background (data-focused:bg-accent…), read from your styles: the item's background is cleared while it's focused; its text colors stay. The highlight is rendered through the item'srenderprop: your ownrenderstill works. The ListBox is its own stacking context (isolation: isolate), so the highlight goes under the items' content, above the list's background. - SelectionIndicator (the check inside an item): with a single selection, the chosen item's check draws itself like a Checkbox's check (its stroke and opacity in 0.3s on Motion's easeOut, at once) while the previous one erases itself, and the list holds still for 250ms before it closes, so the change is seen nearly done before the list fades out. With
animation="pop"(orcheckAnimation="pop"on anAnimateUIProvider), the check glides there instead, on the highlight's spring (stiffness 500, damping 40), and the list holds for 150ms, and a first choice pops it in from half its size out of a 2px blur (a spring, stiffness 500, damping 24). The demo's Controls switch between the two. Choosing the item already chosen, and closing any other way (Escape, a click outside), don't wait. WithselectionMode="multiple", a selected item's check draws itself, and erases itself when it's deselected; withpop, it pops in from half its size and shrinks back out in 0.15s. Only a change of selection animates the checks: opening the list shows them at rest. shadcn/ui renders the check asisSelected ? <Icon /> : null, which can't animate its leaving: render aSelectionIndicatoron every item instead, as the demos do. Outside Animate UI's ListBox and Menu (in a Tab, a ToggleButton…) or with your ownrender, it's React Aria's own. - Tag (shadcn/ui's chips): a tag added to the selection pops in from half its size with a fade, on the popovers' spring (stiffness 400, damping 29). A removed one (with its remove button or Backspace) leaves the collection at once, as in React Aria, and a copy of it shrinks out where it was, out of the flow, in 0.15s. Either way, the tags after it and the input glide to make room or close the gap, on a quick spring without overshoot (stiffness 500, damping 40), instead of jumping, and when the row wraps onto a line more (or one less), the element laying them out (shadcn/ui's chips field) grows (or shrinks) to it on the same spring. A placeholder showing up as the input glides back (the last tag removed) fades in once the input is there, from a light blur (2px, 0.3s on a strong ease-out), instead of riding along. Tags already in the list when it mounts don't animate. The copy is only seen: hidden from assistive tech, inert, without your ids, and without the tag's
data-slot, so it doesn't count as a chip (shadcn/ui's chips field narrows its padding while it holds one). - Under reduced motion, the list and the tags added or removed only fade (the others move at once), a placeholder showing up fades in out of its blur, and the list doesn't hold; the highlight jumps from item to item instead of gliding (it still fades in when it appears); the checks only fade (a single selection's doesn't glide).
API Reference
ComboBox, Input and the other components take React Aria props only. They are not animated.
Popover
React Aria props, plus:
| Prop | Type | Default |
|---|---|---|
transition? | Transition | { duration: 0.22, ease: [0.215, 0.61, 0.355, 1] } |
exitTransition? | Transition | transition |
ListBox
React Aria props only. It holds its items' highlight and its checks (a single selection's glides between them with pop).
ListBoxItem
React Aria props only. It takes part in the highlight; it needs nothing more.
SelectionIndicator
React Aria props, plus:
| Prop | Type | Default |
|---|---|---|
animation? | 'draw' | 'pop' | the closest AnimateUIProvider's checkAnimation, else 'draw' |
transition? | Transition | draw: 0.3s on Motion's easeOut both ways (a Checkbox's, without its delay); pop: a spring (stiffness 500, damping 24) in, 0.15s out, and the highlight's spring (stiffness 500, damping 40) for the glide |
TagGroup
React Aria props only. It glides its tags (and an input after them) when one is added or removed, and the field they're laid out in grows or shrinks with their rows.
TagList
React Aria props only. It tells its tags which were there on mount.
Tag
React Aria props, plus:
| Prop | Type | Default |
|---|---|---|
transition? | Transition | { type: 'spring', stiffness: 400, damping: 29 } |
exitTransition? | Transition | { duration: 0.15, ease: [0.23, 1, 0.32, 1] } |