Virtualized Select
Advanced select with drag-and-drop, virtualization, and custom rendering.
- Single & multiple selection with chip-based display
- Virtualized list via @tanstack/react-virtual — handles 10,000+ options smoothly
- Drag-and-drop sorting (flat & grouped) via @dnd-kit
- Grouped options with visual headers
- Intelligent chip overflow — auto-detects available space, shows partial (truncated) chips, and collapses into a
+N overflow badge with tooltip - Async option loading via
queryFn - Search / filter built-in
- Keyboard accessible — full keyboard navigation
- Fully typed — comprehensive TypeScript definitions
- Tailwind CSS v4 — themeable via CSS custom properties (shadcn/ui compatible)
1. Basic Select
Simple options with no icons. Toggle states to test different configurations.
2. With Icons
Options with icons. Single starts preselected.
3 selected
3. Disabled Options with Tooltips
Some options are disabled. Hover disabled items to see tooltip.
4. Nested Options
Options with children — flattened in the dropdown list.
5. Large Virtualized List (5 000 items)
5 000 items with lazy icon functions — opens instantly thanks to virtualisation.
6. Overflow Chips
Multiple select with many preselected items. Toggle collapsed / showItemsLength.
6 selected
7. Async / Lazy-loaded Options (queryFn)
Options are fetched when the popup opens (simulated 1s delay).
8. Custom Item Renderer
Each option row is replaced with a custom renderer showing a colored dot.
9. List Prefix & Suffix
Custom components rendered before and after the option list.
