/

/

Select with Next.js App Router

Controlling the value of a Select component via the URL using the Next.js App Router⁠ and React.useOptimistic⁠ to ensure a responsive and accessible UI.

Plus Select Dropdowns Routing Next.js Next.js App Router Concurrent React Optimistic updates Advanced

Related examples

Tab with Next.js App RouterUsing Next.js Parallel Routes to create accessible Tabs and tab panels that are rendered on the server and controlled by the URL.

Dialog with Next.js App RouterUsing Next.js Parallel Routes to create an accessible modal Dialog that is rendered on the server and controlled by the URL, with built-in focus management.

Animated SelectAnimating Select using CSS transitions in React. The component waits for the transition to finish before completely hiding the popover.

Select with ComboboxCombining Select and Combobox to create a dropdown with a search field that can be used to filter items.

Multi-SelectAllowing the Select component to select multiple values by passing an array to the defaultValue prop on the SelectProvider component.

Toolbar with SelectRendering Select as a ToolbarItem inside a Toolbar.

View all examples

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue⁠