Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProOrigin and destination airport pickers searched by code, city or name, with a swap button and each picker refusing the other's airport. Use this when people choose a route between two places.
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 in travel search, shipping and commuting forms where two places of the same kind form a route and picking the same one twice is always a mistake.
Do not use it when the two values are independent (a start and an end date). Use two unrelated pickers.
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 |
|---|---|---|---|
airports | { iata, city, name, country }[] | 14 airports | The places to choose from. |
value | { from?: string; to?: string } | - | IATA codes (controlled). |
defaultValue | { from?, to? } | {} | Initial route. |
onValueChange | (route: { from?: string; to?: string }) => void | - | Runs when either side changes or they swap. |
disabled | boolean | false | Disables both pickers and the swap. |
combobox buttons named From: <code> <city> and To: ….aria-disabled and says already the origin or already the destination in text.Swap origin and destination and a polite status line reads the new route.The pattern ships with a Testing Library test (flight-route-airport-pair.test.tsx) that covers searching by code and city, refusing the same airport on both sides and the swap button.