Timezone picker
The agency's time zone, picked once in Settings from every zone with its offset today. Today, due dates, reports and the calendar all read from it.
Playground
Change the controls to try each prop. The code under the preview updates as you go and lists only the props you changed; copy it into your page.
import { TimezonePicker } from '@/ui/timezone-picker';<TimezonePicker label="Time zone" />In Settings
The one place a zone is asked for: Settings, General, under the setting's title and line. A pick saves at once and a toast confirms it.
Today, due dates, reports and the calendar use it.
import { useState } from 'react';
import { Field, FieldContent, FieldDescription, FieldTitle } from '@/ui/field';
import { TimezonePicker } from '@/ui/timezone-picker';
import { toast } from '@/ui/toast';
// Settings · General. A pick saves at once; the field waits while it saves, then a toast confirms.
export default function AgencyTimeZone() {
const [zone, setZone] = useState('Europe/London');
const [saving, setSaving] = useState(false);
return (
<Field className="max-w-80">
<FieldContent>
<FieldTitle id="agency-zone">Time zone</FieldTitle>
<FieldDescription id="agency-zone-help">Today, due dates, reports and the calendar use it.</FieldDescription>
</FieldContent>
<TimezonePicker
aria-describedby="agency-zone-help"
value={zone}
loading={saving}
onValueChange={(next) => {
setZone(next);
setSaving(true);
setTimeout(() => {
setSaving(false);
toast.add({ type: 'success', title: `Time zone set to ${next}` });
}, 900);
}}
/>
</Field>
);
}States
UTC is the default for a new agency. Saving holds a spinner in place of the caret and fades the field until the save returns. Type to search: "new york" finds America/New_York. A search with no match says "Nothing found."
import { Field, FieldLabel } from '@/ui/field';
import { TimezonePicker } from '@/ui/timezone-picker';
// A new agency starts on UTC. Type "new york" to search: spaces match the underscores. Type "zz" for no match.
export default function States() {
return (
<div className="flex w-full max-w-80 flex-col gap-200">
<Field>
<FieldLabel htmlFor="zone-default">Default</FieldLabel>
<TimezonePicker id="zone-default" />
</Field>
<Field>
<FieldLabel htmlFor="zone-saving">Saving</FieldLabel>
<TimezonePicker id="zone-saving" defaultValue="Asia/Singapore" loading />
</Field>
<Field disabled>
<FieldLabel htmlFor="zone-disabled">Disabled</FieldLabel>
<TimezonePicker id="zone-disabled" defaultValue="Asia/Ho_Chi_Minh" disabled />
</Field>
</div>
);
}Time presets menu
A short list of named times that act on one click: snooze a thread, or remind me if they haven't replied. Pick a date opens the calendar for anything else.
Voice input
Talk to Flo instead of typing. The mic dictates into the box to check before sending; holding ⌘⇧Space talks and letting go sends. Words stream into the box as they are heard.