Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA select where unavailable options stay visible with the reason (Sold out, Needs the Pro plan), are skipped by the arrow keys and can carry an action such as Upgrade beside them. Use this when hiding an option would leave people wondering where it went.
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 it for delivery slots, plan features, seats and regions, where some choices exist but cannot be picked now and knowing why (and how to unlock them) is part of the experience.
Do not use it when unavailable options are irrelevant. Hide them.
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 |
| --------------- | ---------------------------------------------------------------------------- | -------- | --------------------------------------------- | ---------------------------- |
| options | { value, label, unavailable?: { reason, action?: { label, onAction } } }[] | - | unavailable makes an option non-selectable. |
| value | string \\ | null | - | Selected value (controlled). |
| defaultValue | string \\ | null | null | Initial value. |
| onValueChange | (value: string) => void | - | Runs when an available option is chosen. |
| aria-label | string | Option | Names the control. |
aria-disabled with the reason in their name (Friday 10:00, sold out); the arrow keys skip them.presentation wrapper, so options never contain interactive children.The pattern ships with a Testing Library test (select-unavailable-options-with-reasons.test.tsx) that covers reasons in names, skipping with the arrows, the action button and the status for a blocked click.