Time field
Types a time into hour, minute and AM/PM segments, on the locale's clock. Carries a time zone when the value has one, so a meeting at 2 PM means the same moment for everyone.
Installation
Set up Camaleo once (Installation), then import what you need. Time is a time of day; ZonedDateTime adds a date and a time zone. Both are re-exported from the package.
import { TimeField, Time, ZonedDateTime, Field, FieldLabel } from "@camaleo/react";Anatomy
The same parts as DateField: a box with one segment per part of the time, and literals like : between them.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
Shown on your store page and in Maps.
Length: 2 h 30 min
Start and end
Change either time. Two controlled fields give you the length, and the end field turns invalid when it comes before the start.
Within business hours
Set a time from 8:00 AM to 6:00 PM. minValue and maxValue mark anything outside invalid, and FieldError says the allowed range.
12 or 24 hours
The locale picks the clock. hourCycle forces one, for a timetable or an audience that expects it.
Hours, minutes and seconds into the video.
Seconds
granularity="second" adds a segment for timestamps and durations. Use "hour" when only the hour matters.
Shown in the organizer's time zone.
With a time zone
A ZonedDateTime shows its zone as a read-only segment, so people in other cities know whose 10 AM it is. hideTimeZone drops it.
Press Arrow Up: it starts at 7:00 AM, not midnight.
Placeholder value
An empty field starts from midnight. placeholderValue starts the arrows at a likely time without filling it in.
Set by the hotel. Ask the front desk for a late check-out.
Read-only
readOnly keeps the time focusable and readable by screen readers. Say who sets it.
In context
Times come with dates and schedules. These are whole pieces of UI you can copy, in the skin you picked.
Opening hours
Café Aurora · 12 Bay Street
Daily summary
One email with yesterday's sales and today's orders.
In your time zone, New York (EST).
Guidelines
A ZonedDateTime prints it next to the time, so nobody joins an hour early.
Everyone reads "10:00 AM" in their own zone, and most of them are wrong.
Start and end are each validated and read on their own.
"10:30 to 10:45-ish" can't be parsed, sorted or checked against the clock.
Props
Field, the field's disabled is used when this is not set.Field, the field's invalid is used when this is not set."en-US" or "pt-BR". Defaults to the nearest I18nProvider or the browser's language.TimeValue is Time, CalendarDateTime or ZonedDateTime; the value you pass is the type you get back in onChange. validationBehavior defaults to "aria": an out-of-range time marks the field invalid but never blocks the form.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the field itself.
Attributes
Tokens it reads
Color
Shape & size
Type & motion
This component only
/* a quieter time zone label */
[data-slot="time-field"] [data-type="timeZoneName"] {
color: var(--cml-fg-muted);
font-size: 0.875em;
}Accessibility
- Each segment is a spinbutton named by its part (hour, minute, AM/PM) and the field's label.
- The whole value is read as text, such as "10:00 AM GMT-3", time zone included.
- FieldDescription and FieldError are linked with aria-describedby, and an invalid field sets aria-invalid.
- Always pass locale: the server and the browser then format the same way, and the clock matches the page's language.