Flux

Appearance

Time zone picker ​

This is a time zone select component designed to help users easily choose their preferred time zone from a comprehensive list of options. Users can efficiently set their time zone, ensuring that date and time-related information is accurate and synchronized with their location, making it ideal for platforms where precise time tracking and coordination are essential, such as global event scheduling, travel booking, or remote team collaboration.

Required icons

angle-down
magnifying-glass

Props

model-value: string | null
The value of the timezone picker.

auto-focus?: boolean
Focus the picker when the form is mounted.

disabled?: boolean
If the timezone picker is disabled.

error?: string | null
Error message describing why the picker is invalid. Sets aria-invalid and a red border.

is-condensed?: boolean
Renders the picker in a compact style with reduced padding.

is-loading?: boolean
Shows a loading spinner inside the picker.

is-readonly?: boolean
If the picker is readonly. Blocks opening the popup.

is-secondary?: boolean
If the field is secondary and is rendered in an alternative style.

name?: string
The name attribute passed to the underlying select.

placeholder?: string
The placeholder of the timezone picker.

Emits

update:model-value: [string | null]
Triggered when the value is changed.

Example ​

Basic

A basic time zone picker.

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxFormTimeZonePicker
                v-model="timezone"
                placeholder="Select your timezone ..."/>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxFormTimeZonePicker, FluxPane, FluxPaneBody } from '@flux-ui/components';
    import { ref } from 'vue';

    const timezone = ref(null);
</script>

Used components ​