Flux

Time zone picker ​

The time zone picker lets users choose a time zone from a comprehensive list, so date and time information stays accurate for their location.

Required icons

angles-up-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-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.

Examples ​

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>

Preselected

A time zone picker with a value already selected.

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

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

    const timezone = ref('Europe/Amsterdam');
</script>

Disabled

A disabled time zone picker.

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxFormTimeZonePicker
                v-model="timezone"
                disabled/>
        </FluxPaneBody>
    </FluxPane>
</template>

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

    const timezone = ref('Europe/Amsterdam');
</script>

Invalid

A time zone picker with an error message.

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField
                    label="Time zone"
                    error="Please select a time zone.">
                    <FluxFormTimeZonePicker
                        v-model="timezone"
                        placeholder="Select your timezone ..."/>
                </FluxFormField>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

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

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

Used components ​