Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Combobox - Small Size Variant
A compact React combobox with small size variant using h-8 trigger, text-xs typography, and size-3 icons for space-constrained interfaces with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Space is precious—smaller components fit more. This React combobox uses h-8 height, text-xs text size, and size-3 icons creating compact interface for dense layouts. Built with shadcn/ui Command and Popover featuring consistent small sizing across trigger, input, items, and icons. The small size variant optimizes density—perfect for toolbars, table cells, sidebar controls, or anywhere space constraints demand compact UI without sacrificing functionality maintaining full combobox features in minimal footprint.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Single Select
Default size combobox
Large Size Variant
Larger h-12 combobox
Full Width Variant
Responsive width sizing
Small Button
Small button sizing
Multiple Items with Badges
Compact multi-select
With Item Icons
Icon-enhanced items
Questions you might have
React Combobox - With Item Icons
A React combobox with Lucide React icons stored in data using createElement for dynamic icon rendering in both trigger and items with shadcn/ui
React Combobox - Large Size Variant
A large React combobox variant with h-12 trigger, text-base typography, and size-5 icons for prominent display and improved touch accessibility with shadcn/ui