Cascading Select Form

A form with two dependent select dropdowns where the second select's options change based on the first selection

This cascading select form demonstrates how to build dependent dropdown fields where one selection controls the available options in another. Perfect for hierarchical selections like country-state, category-subcategory, or department-team structures. The second select automatically resets when the first selection changes.

Cascading Select Form preview

Scroll to load preview

Installation

Install

Pro block

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

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

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

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

Select Basic

Basic dropdown select form

Select Grouped

Grouped options in a select dropdown

Select Searchable

Searchable combobox dropdown

Multi Select

Multi-select with checkbox popover

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?

Bulk Edit Form

A bulk edit form for editing multiple items at once with table-like layout and batch actions

Checkbox Grid Layout

A grid of checkboxes arranged in multiple columns instead of a vertical list for efficient space usage

Cascading Select Form