Time Field
Take a time of day without a picker: type the hours and minutes, or nudge each one with the arrow keys.
Installation
You can add the time field using our CLI or manually:
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.
npx boardui@latest add time-fieldUsing a shared UI package or custom import aliases? Configure your installation paths before running the CLI. Copy-paste examples use the default imports.
Hour cycle and seconds
The field follows the locale's format and hour cycle. Force one with hourCycle={24}, add seconds with granularity="second", and hide the clock with icon={null}. Values are Time objects from @internationalized/date.
<TimeField label="Departure" hourCycle={24} defaultValue={new Time(21, 45)} /><TimeField label="Lap time" granularity="second" hourCycle={24} defaultValue={new Time(0, 4, 32)} icon={null} /><TimeField label="Reminder" size="small" defaultValue={new Time(8, 30)} /><TimeField label="Reminder" size="small" isDisabled defaultValue={new Time(8, 30)} hint="Reminders are off." />Limits
A time outside minValue and maxValue marks the field invalid and turns the hint into an error. With validationBehavior="aria", that happens as people type; by default it waits for the form to submit.
<TimeField label="Delivery time" validationBehavior="aria" minValue={new Time(8)} maxValue={new Time(20)} defaultValue={new Time(21, 30)} hint="Between 8:00 AM and 8:00 PM."/>Right-to-left
Inside DirectionProvider, the clock moves to the right, and the segments take the locale's order, digits, and day period.
import { DirectionProvider } from "@/components/foundations/direction/direction";
<DirectionProvider locale="ar"> <TimeField label="يفتح" defaultValue={new Time(9, 0)} /> <TimeField label="يغلق" defaultValue={new Time(18, 0)} /></DirectionProvider>Keyboard and accessibility
Each segment is its own stop. Typing digits fills the focused segment and moves to the next one, Up and Down change it, Left and Right move between segments, and Backspace clears it. In a 12 hour cycle, A and P set the day period. Screen readers hear each segment with its name and value.