Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Field - Select with Groups
A React select dropdown with grouped options using SelectGroup and SelectLabel for categorized Timezone selection by region
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Long option lists need organization—grouping by category helps users find choices faster. This React select uses shadcn/ui SelectGroup components with SelectLabel headers organizing Timezone options by region (North America, Europe). Built with nested SelectGroup elements containing SelectLabel and SelectItem options, categories create visual sections—perfect for timezones, countries by continent, products by category, or anywhere logical grouping improves scannability of long option lists.
Choose your local timezone.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Select
Ungrouped flat select options
Select with Description
Select with helper text
Grouped Combobox
Searchable grouped select
Dropdown Menu
Menu with grouped sections
Command Menu
Grouped command palette
Accordion
Grouped collapsible content