Time input

Pro

A field for a time of day, "14:30". It is the browser's own time field, so it shows the hours the way the person's locale does (24-hour or with AM and PM) and its parts are reached with the keyboard; the value is always 24-hour "HH:MM" (or "HH:MM:SS" with a step under 60). Empty is "", never midnight.

A time with no zone is ambiguous across a team, so say which one with timeZone: it is printed after the field and read with it. Use Field for the label, hint and error.

Markdown

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0, 2.2.0, 2.3.0, 2.4.0, 2.5.0, 2.5.1, 2.6.0, 2.6.1 and 2.6.2: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/time-input

Brings in: input, locale, tokens, utils

Usage

TSX · The example above

"use client"

import * as React from "react"
import { Field } from "@/components/candor/ui/field"
import { TimeInput } from "@/components/candor/ui/time-input"

// The value is always 24-hour "HH:MM"; the field shows it as the person's locale does. Say which zone it is in.
export default function Example() {
  const [time, setTime] = React.useState("09:00")
  return (
    <Field label="Send the daily digest at" className="w-full max-w-xs">
      <TimeInput value={time} onValueChange={setTime} timeZone="UTC" />
    </Field>
  )
}

<TimeInput>

Prop	Type	Default	Description
value	`string \| undefined`	—	The time as "HH:MM", when you control it. "" is empty.
defaultValue	`string \| undefined`	—	The time at first, when you don't control it.
onValueChange	`((value: string) => void) \| undefined`	—	Called with "HH:MM" (or "HH:MM:SS") as the person changes it, or "" when they clear it.
timeZone	`string \| undefined`	—	The zone the time is in, as people should read it: "UTC", "Europe/London", "your workspace's time".
attend	`boolean \| undefined`	—	Rings the field once, as `Input`'s `attend` does, after a failed submit.
"aria-describedby"	`string \| undefined`	—	Ids of anything else that describes the field; the zone's id is added after them.

Also takes the props of Omit<React.ComponentProps<"input">, "value" | "defaultValue" | "type" | "onChange">.

Strings

The fixed words, in English by default. Change any of them under timeInput in <LocaleProvider strings={{ … }}>; the table is exported as timeInputStrings.

Key	English
zone	Time zone: {zone}