A place in the day
Studio visit
The browser handles local time formatting and keyboard editing.
Appointments start every 15 minutes
Time field
Edits a time using the platform's localized time control with native bounds and second-based steps.
Preview
In action
When to use
Use it for
- A time of day with browser-native locale and keyboard behavior.
- Minutes or seconds, with the native step measured in seconds.
Not for
- An elapsed duration; use NumberField with units.
- A calendar date; use DatePicker.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { TimeField } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/time-field.
2. Vendor the source
npx @noorddev/vlak-cli add time-field
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/time-field.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { TimeField } from "@noorddev/vlak-react";
<TimeField label="Start time" name="start-time" defaultValue="09:30" min="09:00" max="18:00" step={900} hint="Appointments start every 15 minutes" />Props
TimeField
The platform time editor, including its locale, keyboard and step validation.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | A 24-hour HTML time value, HH:mm or HH:mm:ss. The browser localizes editing. | |
defaultValue | string | "" | |
onValueChange | (value: string) => void | ||
label | ReactNode | ||
hint | ReactNode | ||
error | ReactNode |
Also accepts Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange">.
Keyboard
| Keys | Does |
|---|---|
| Tab, arrow keys | Uses the browser's time segment navigation and native stepping. |
| Typing | Edits the active hour, minute, or second segment according to the platform. |
Accessibility
- Wraps Input, preserving label, hint, error, native form attributes, disabled/readOnly and the forwarded input ref.
- Values use HH:mm or HH:mm:ss; the visible editor follows the browser's locale and 12/24-hour preference.
- No date or time-zone conversion is performed. Controlled/uncontrolled state and form reset are supported.
Markup
<label>Start time<input class="rs-input rs-time-field" type="time" name="start-time" value="09:30" min="09:00" max="18:00" step="900" /></label>
Classes
.rs-time-field