Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProTwo dependent selects, like country and region, where the second is disabled with an explanation until the first has a value, is cleared when it changes and announces how many options appeared.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this for address forms and any pair of lists where the second set depends on the first: country and region, make and model, category and subcategory.
Do not cascade more than two levels in selects: use a cascader for deep trees.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
parentLabel, childLabel | string | - | Labels of the two selects. |
options | { value, label, children? }[] | - | Parents with their children. |
value / onValueChange | { parent, child } / fn | - | Controlled pair of values. |
| Key | Action |
|---|---|
| Tab | moves from the first select to the second once it is enabled |
The pattern ships a Testing Library test (select-dependent-cascade.test.tsx) that covers the disabled child and reason, the announcement, clearing on parent change and parents with no children.