Is it free for commercial use?

Yes. The component is available under the repository's open-source licence; check the licence file for its terms.

Does it infer a time zone or show offsets?

No. The component displays only the IDs and labels supplied by the caller.

What happens if a selected ID disappears from options?

It remains visible as unavailable; the component does not substitute another zone.

Timezone Picker

A searchable time zone picker backed only by caller-supplied identifiers.

Time zone

Selected identifier: Europe/London

Input Timezone lets people choose an IANA time zone from the options supplied by your application. It preserves that list's order and labels, and never guesses a browser zone or calculates offsets.

Filtering checks both the display label and identifier. If a selected identifier is absent from the current options, the picker shows it as unavailable instead of silently choosing another value.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/input-timezone

Usage

"use client";
import { useState } from "react";
import { InputTimezone } from "@/components/input-timezone";

const zones = [{ id: "Europe/London", label: "London" }];
export function ZoneField() {
  const [value, setValue] = useState("Europe/London");
  return <InputTimezone value={value} options={zones} onValueChange={setValue} />;
}

Props

Prop	Type	Default	Description
value	string \| null	required	Selected caller-provided IANA identifier; missing values remain visibly unavailable.
options	readonly TimezoneOption[]	required	Caller-owned ordered options with an id and exact display label. Duplicate IDs after the first are ignored.
onValueChange	(id: string) => void	required	Receives the chosen identifier unchanged.
label	string	Time zone	Visible field label.
placeholder	string	Search time zones	Search input placeholder and accessible name.
className	string	undefined	Additional classes merged on the root.

Customisation

The picker uses semantic surface, border, foreground, muted, accent and focus tokens. Supply only zones relevant to the current workflow.

.timezone-field { max-inline-size: 28rem; }

Frequently asked questions

Is it free for commercial use?: Yes. The component is available under the repository's open-source licence; check the licence file for its terms.
Does it infer a time zone or show offsets?: No. The component displays only the IDs and labels supplied by the caller.
What happens if a selected ID disappears from options?: It remains visible as unavailable; the component does not substitute another zone.

Related components

Build thoughtful formsExplore more free controls for data entry and authoring flows.Form components