Timezone field - Flex Demo

Search world time zones with local offsets and browser defaults.

Search and browser defaults

Timezone values are IANA identifiers. Search by region/city or let the browser choose an initial timezone for an empty field.

Search all timezones

Warsaw, Poland

Stores Europe/Warsaw; offsets are shown in the menu.

Optional timezone

Empty until a timezone is selected.

Browser timezone

Warsaw, Poland

The browser timezone is preferred only while empty.

Restricted and excluded timezones

Use a whitelist, exclude individual identifiers or hide UTC from the catalog.

Approved timezones

New York, United States

Only these four identifiers are offered.

Exclude selected timezones

Warsaw, Poland

New York and Tokyo are removed.

Without UTC

Warsaw, Poland

Canonical UTC is omitted.

Labels and sizes

Hide offsets, localize labels or use a larger input. The dropdown remains the shared FLEX Select.

Without offset label

Warsaw, Poland

Polski

Warszawa, Polska

Large timezone input

Tokyo, Japan

Validation: required and whitelist

These checks reject empty and unsupported values independently from the other examples.

Required timezone^*

Empty value is rejected.

Checking…

Restricted timezone validation

Warsaw, Poland

Asia/Tokyo is outside this explicit server whitelist.

Checking…

IANA identifier validation

Warsaw, Poland

A made-up timezone identifier is rejected.

Checking…

Variants and locked values

Compare a secondary input, a read-only timezone and a disabled timezone.

Small · secondary

Warsaw, Poland

Read-only timezone

London, United Kingdom

Disabled timezone

London, United Kingdom

Information

Developer: FLEX
Category: Pickers
Website