Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA From and To pair of selects over an ordered list, where To can never be earlier than From, options that would break that are disabled with the reason, and moving From past To pulls To along and says so. Use this when two choices form a range.
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 opening hours, availability windows, year ranges and version ranges, where a reversed range is a mistake that should be impossible to make.
Do not use it when the two values are independent. Use two plain selects.
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 }[] | - | The ordered list both selects choose from. |
value | { from: string; to: string } | - | The range (controlled). |
defaultValue | { from, to } | first and last | Initial range. |
onValueChange | (range) => void | - | Runs on every change. |
minSteps | number | 1 | Smallest gap between From and To in list positions. |
fromLabel / toLabel | string | From / To | Visible labels. |
disabled and read <label>, before the start.role="status" line says To moved to 17:00.09:00 to 17:00.The pattern ships with a Testing Library test (linked-from-to-selects.test.tsx) that covers disabling earlier To options with the reason, To following From and the announcement.