Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form blocks

Pro

Cascading Select Form Block for Solid

A listing form with a category select that unlocks and refills a subcategory select, clears it when the category changes, and reads the path with a count of subcategories.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let one choice narrow the next with this cascading select form for Solid with Ark UI. A compact header sits over a hairline frame with a plus mark on each corner: a band with two Select fields side by side, Category and Subcategory, and a band that reads the path. The subcategory select is disabled and says "Choose a category first" until a category is set; choosing one fills it with that category's subcategories (nine for Home and garden, four to six for the others). Changing the category clears the subcategory and says so in the foot ("Subcategory cleared."), and focus stays on the control that changed. The path band reads "Home and garden / Lighting" with how many subcategories the category has. Saving with either select empty names the missing one under it and puts focus on it. It's built from Select, Field, Shine Button and Guides. For listings, product forms, support topics and any pair of choices where the second depends on the first.

FAQ

How do I change the categories?

Edit CATEGORIES and SUBS. Every subcategory carries the id of its category, and subsOf returns the ones that match, so a new category is one entry in the first list and a few in the second. The subcategory select always uses the one collection of all subcategories, so only the options it shows change, never the select itself.

Why is the subcategory cleared when I change the category?

A subcategory that belongs to another category would be a wrong pair, and the select could no longer show it. Choosing the same category again changes nothing and keeps the subcategory. The foot says "Subcategory cleared." only when there was one to clear.

How does it work with a keyboard and a screen reader?

Both selects have labels and open with Enter, Space or the arrow keys; typing a letter jumps to an option. The disabled subcategory select leaves the tab order, and the foot, the one live region, says what changed. A failed Save moves focus to the select that is missing, with its message tied to it.

How does it look on a phone?

The two selects stack, the path band keeps its two lines of space so it never moves, and the foot is pinned to the bottom of the screen with Save at full width.

What stays local, and how do I connect it for real?

Both lists are typed constants and nothing is saved: the foot says "Saved in this demo. Nothing sent." In your app, send the two ids together and check on the server that the subcategory belongs to the category, since a client can send any pair.

How do I connect it to react-hook-form or TanStack Form?

react-hook-form is a React library; use TanStack Form's adapter for your framework, with a field listener on category that resets sub.TanStack Form also has listeners.onChange on the category field for the same reset.
All 100 form blocks