Location Picker

ProNew

A continent, country and city tree select that shows the local time of the chosen city, formatted for its time zone. Use this when a form needs a place and the time there matters.

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 / onValueChange

label

Guide and examples

When to use it

Use it for profiles, meeting schedulers, shipping and any form where a place implies a time zone.

Do not use it for free-text addresses or when the browser's own time zone is enough.

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
`places`	`TreeNode<City>[]`	-	Continents > countries > cities; cities carry `data.timeZone`.
`value / defaultValue / onValueChange`	`string \| null`	`null`	The chosen city id.
`label`	`string`	`"Location"`	Field label.
`now`	`() => Date`	`new Date()`	The clock; replace it in tests.

Accessibility

The line under the field is the select's description (aria-describedby), so the time is read with the value.
Continents and countries only open and close.
Time zones are formatted with Intl, so numerals and 12/24 hour format follow the page language.

Testing

The pattern ships with a Testing Library test (location-picker.test.tsx) that covers the time formatting, leaf-only choice, the description and an unknown zone.

Guide and examples

When to use it

Use it for profiles, meeting schedulers, shipping and any form where a place implies a time zone.

Do not use it for free-text addresses or when the browser's own time zone is enough.

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
`places`	`TreeNode<City>[]`	-	Continents > countries > cities; cities carry `data.timeZone`.
`value / defaultValue / onValueChange`	`string \| null`	`null`	The chosen city id.
`label`	`string`	`"Location"`	Field label.
`now`	`() => Date`	`new Date()`	The clock; replace it in tests.

Accessibility

The line under the field is the select's description (aria-describedby), so the time is read with the value.
Continents and countries only open and close.
Time zones are formatted with Intl, so numerals and 12/24 hour format follow the page language.

Testing

The pattern ships with a Testing Library test (location-picker.test.tsx) that covers the time formatting, leaf-only choice, the description and an unknown zone.