Grouped Select Dropdown Form

A select dropdown form with grouped options using SelectGroup and SelectLabel

This grouped select form demonstrates how to organize dropdown options into logical categories for improved usability. Perfect for selections with natural groupings like product categories, food types, or organizational hierarchies. Create clear visual separations between option groups.

Scroll to load preview

Installation

Install

Pro block

npx shadcn@latest add https://www.shadcn.io/r/form-select-grouped.json

npx shadcn@latest add https://www.shadcn.io/r/form-select-grouped.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/form-select-grouped.json

bunx shadcn@latest add https://www.shadcn.io/r/form-select-grouped.json

Select Basic

Basic dropdown select form

Select Searchable

Searchable combobox dropdown

Multi Select

Multi-select with checkbox popover

Cascading Select

Dependent cascading dropdowns

Select With Icons

Select dropdown with leading icons

Country Select

Country selector with flag emojis

FAQ

Last updated on March 24, 2026

Was this page helpful?

Select Dropdown Form

A basic select dropdown form demonstrating the standard Select and Controller pattern

Searchable Combobox Form

A searchable combobox-style select form using Popover and Command components

Grouped Select Dropdown Form