Region Select With Latency

ProNew

A region picker that measures the round trip to each region when it opens, sorts them fastest first, marks the fastest and offers Auto to use it. Use this when the location of a deployment, database or server matters for speed.

Customize

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.

value

defaultValue

concurrency4

Guide and examples

When to use it

Use it in deployment and project-creation flows, where choosing a nearby region is the main performance decision and people cannot guess it from city names.

Do not use it when latency to the person's browser is irrelevant, as when data must stay in a legal region. Show the legal constraint instead.

Installation

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.

Props

Prop	Type	Default	Description
`regions`	`{ id, name, location? }[]`	-	Available regions.
`measure`	`(region, { signal }) => Promise<number>`	-	Returns the round trip in milliseconds.
`value`	`string`	-	A region id, or `auto` (controlled).
`defaultValue`	`string`	`auto`	Initial value.
`onValueChange`	`(id: string, resolved?: string) => void`	-	Runs on change; `resolved` is the fastest region when `auto` is chosen.
`concurrency`	`number`	`4`	Regions measured at once.

Accessibility

Each row reads Frankfurt, 24 milliseconds; rows still being measured read measuring and failed ones unavailable.
Regions re-sort as results arrive, but the cmdk highlight follows the region, not the position.
Auto (fastest: Frankfurt) appears first once at least one result is in.
A polite status announces Measured 6 regions. Fastest: Frankfurt, 24 ms.

Testing

The pattern ships with a Testing Library test (region-select-with-latency.test.tsx) that covers measuring on open, sorting by latency, Auto resolving to the fastest and failed regions.

Guide and examples

When to use it

Use it in deployment and project-creation flows, where choosing a nearby region is the main performance decision and people cannot guess it from city names.

Do not use it when latency to the person's browser is irrelevant, as when data must stay in a legal region. Show the legal constraint instead.

Installation

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.

Props

Prop	Type	Default	Description
`regions`	`{ id, name, location? }[]`	-	Available regions.
`measure`	`(region, { signal }) => Promise<number>`	-	Returns the round trip in milliseconds.
`value`	`string`	-	A region id, or `auto` (controlled).
`defaultValue`	`string`	`auto`	Initial value.
`onValueChange`	`(id: string, resolved?: string) => void`	-	Runs on change; `resolved` is the fastest region when `auto` is chosen.
`concurrency`	`number`	`4`	Regions measured at once.

Accessibility

Each row reads Frankfurt, 24 milliseconds; rows still being measured read measuring and failed ones unavailable.
Regions re-sort as results arrive, but the cmdk highlight follows the region, not the position.
Auto (fastest: Frankfurt) appears first once at least one result is in.
A polite status announces Measured 6 regions. Fastest: Frankfurt, 24 ms.

Testing

The pattern ships with a Testing Library test (region-select-with-latency.test.tsx) that covers measuring on open, sorting by latency, Auto resolving to the fastest and failed regions.