Arc

Time dialPro

Spin a dial to pick an hour and see which team cities are at work.

Live · keyboard ready
Drag around the dial or use the arrow keys to move in 15 minute steps. Page Up and Page Down move by an hour.

San Francisco 2:00 PM. London 10:00 PM. Tokyo 6:00 AM, next day

2 of 4 offices at work

  • Planning a moment across two to five cities, such as calls, releases, or handovers.
  • Distributed teams that need to see at a glance who is inside working hours.
  • Use time-picker for a single local time.
  • Use date-picker or calendar when the day matters more than the hour.
  • Use slider for a plain numeric range.

Installation

Pro source and install commands unlock with a Pro plan.

example.tsx
import { useState } from "react";import { TimeDial } from "@/registry/components/time-dial/time-dial"; const cities = [  { id: "nyc", name: "New York", code: "NYC", offset: -240 },  { id: "lon", name: "London", code: "LON", offset: 60 },  { id: "tyo", name: "Tokyo", code: "TYO", offset: 540 },]; export function CallPlanner() {  const [time, setTime] = useState(15 * 60);  return <TimeDial cities={cities} value={time} onValueChange={setTime} hourCycle={24} workingHours={[480, 1020]} label="Call time" />;}

TimeDial

A 24 hour rotary dial for choosing a time across time zones. Every city rides the dial at its own local time, a shaded band marks working hours, and the home city reads out in the center.

PropTypeDefaultDescription
citiesRequired{ id: string; name: string; code: string; offset: number }[]–Two to five cities. offset is minutes from UTC in steps of 15; code is two or three letters shown on the dial.
valuenumber–Controlled time in UTC minutes from midnight on the reference day. May leave 0 to 1439 to reach adjacent days.
defaultValuenumber0Initial time when uncontrolled.
onValueChange(value: number) => void–Fires with the destination as soon as the dial is released or stepped, before it comes to rest.
homeIdstring–Controlled id of the city the dial reads in. Defaults to the first city.
defaultHomeIdstring–Initial home city when uncontrolled.
onHomeChange(id: string) => void–Called when a city is chosen from the list.
minnumber-InfinityEarliest time in UTC minutes. The dial stretches past it and springs back.
maxnumberInfinityLatest time in UTC minutes.
weekdaynumber1Weekday of the reference day in UTC, 0 for Sunday.
hourCycle12 | 2412Clock for the readout: 12 reads 9:30 AM, 24 reads 09:30.
workingHours[start: number, end: number][540, 1080]Local working hours in minutes from midnight, drawn as a band on the dial. A city inside the band is at work. Defaults to 9:00 to 18:00.
labelstring"Time"Accessible name of the dial.
classNamestring–Class on the root element.
Arrow RightorArrow Up
Step forward a quarter hour.
Arrow LeftorArrow Down
Step back a quarter hour.
Page UporPage Down
Step an hour forward or back.
HomeorEnd
Jump to the start or last quarter hour of the home city's day.
  • The dial is a focusable role="slider" with aria-valuenow in home-city minutes and a spoken aria-valuetext.
  • The city list uses buttons with aria-pressed for the home city.
  • Changes are announced through a polite live region; the SVG face and readout are aria-hidden.
  • Drags have soft quarter-hour detents, flicks coast on a spring into the nearest quarter hour, and bounds rubber-band.
  • Readout digits roll like an odometer, city marks swap between knob and dot as the home city changes, and the sun and moon turn over at the day/night boundary.
  • Reduced motion removes flick coasting and replaces rises and blurs with plain fades.
  • The root is a container up to 720px; from 600px the dial and city list sit side by side, below that they stack.
  • The dial is min(100%, 256px) with touch-action none, so dragging it on touch never scrolls the page.
  • Below 360px of container width the city rows tighten.
  • The face is one SVG and rotation runs on motion values, so drags do not re-render city rows.
  • Offsets are fixed per city; there is no time zone database, so pass DST-correct offsets yourself.

Notes for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Use to plan a moment across two to five offices (calls, releases, handovers). For a single local time use time-picker.
  • Store the value in UTC minutes and convert per city yourself; offsets are fixed, so pass DST-correct offsets for the date in question.
  • Set workingHours to the team's shared day so the band shows at a glance who would be at work, and hourCycle to match the locale.
/components/time-dial/markdown

The full library index for assistants is at /llms.txt.

Time pickerComponentChoose a time with sensible keyboard behavior.Date pickerComponentChoose a date without losing context.CalendarComponentBrowse dates in a clear, compact month view.SliderComponentPick a value or a range on a track that follows your finger.