Time Picker

import { Field, FieldHelperText, FieldLabel } from "@hel/ui/field"
import { TimePicker } from "@hel/ui/time-picker"

When to use it#

Use a time picker when people choose a time of day: a pickup time, opening hours, an appointment. They pick the hour and the minute from scrolling lists instead of typing, so a time can never be written wrongly. To choose a date as well, put it next to a Date Picker.

Import#

Copyimport { TimePicker } from "@hel/ui/time-picker"

Usage#

TimePicker is a single component. Inside a Field, point aria-labelledby at the label, or give it an aria-label when there is no visible label.

Copy<Field>
  <FieldLabel id="pickup-label">Pickup time</FieldLabel>
  <TimePicker aria-labelledby="pickup-label" defaultValue="14:30" />
</Field>

The value#

The value is always a 24 hour string, "HH:mm", or "HH:mm:ss" when seconds are on, such as "14:30". It means the same thing whether the clock shows 2:30 PM or 14:30, in every language. null means no time is chosen.

Control it with value and onValueChange, or start with defaultValue. Because the string is zero padded, two times can be compared as text.

Examples#

Steps, seconds and now#

minuteStep offers fewer minutes: every 15 gives 00, 15, 30 and 45. A time that is already set stays available even if it is not on the grid. showSeconds adds a third list, and secondStep thins it. hourCycle forces a 12 or 24 hour clock when you do not want the language to decide. showNow adds a button that sets the time to the current time.

import { Field, FieldLabel } from "@hel/ui/field"
import { Stack } from "@hel/ui/stack"
import { TimePicker } from "@hel/ui/time-picker"

Validating two times#

The picker does not know about any other time, so rules between times live in your code. Compare the two values, and show the error with invalid and a FieldError.

import * as React from "react"

import { Field, FieldError, FieldLabel } from "@hel/ui/field"

Languages#

locale decides the clock, the digits and the names for AM and PM. English (US) uses a 12 hour clock, and German a 24 hour one. Arabic writes Arabic-Indic digits, and numberingSystem="latn" switches them back to 0 to 9. The lists keep the hour before the minute even in a right-to-left layout, the way times are read.

English and Arabic texts are built in. For another language, give the assistive texts and prompts through messages, as the German example does.

import { Stack } from "@hel/ui/stack"
import { TimePicker } from "@hel/ui/time-picker"

In a form#

Give the picker a name and a hidden input carries the 24 hour value with the form.

States#

disabled turns the box off. invalid shows the error ring, and placeholder replaces the prompt shown while nothing is chosen. To open it from your own code, use open and onOpenChange.

Props#