Time
A time picker field for collecting time-of-day values with optional min/max constraints and timezone handling.
The Time field provides a native time picker for selecting a time of day. It supports configurable time range constraints and timezone storage modes to ensure accurate time capture across different user locations.
Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| label | string | -- | Label text displayed above the field |
| placeholder | string | -- | Ghost text shown inside the input when empty |
| required | boolean | false | Whether a value must be provided before submission |
| width | LayoutWidth | "full" | Horizontal space the field occupies ("1/4", "1/3", "1/2", "2/3", "3/4", "full") |
| help | string | -- | Help text displayed below the field |
| key | string | -- | Variable name for referencing the field value |
| minTime | string | -- | Earliest selectable time (e.g. "09:00") |
| maxTime | string | -- | Latest selectable time (e.g. "17:00") |
| timezoneMode | TimezoneStorageMode | "local" | How the time value is stored: "local", "utc", "creator", or "specific" |
| creatorTimezone | string | -- | IANA timezone stored when timezoneMode is "creator" (set automatically) |
| specificTimezone | string | -- | IANA timezone (e.g. "America/New_York") when timezoneMode is "specific" |
Timezone Storage Modes
The timezoneMode property controls how the selected time is stored:
- local -- Store exactly as the user entered it, with no conversion.
- utc -- Convert the time to UTC before storing.
- creator -- Convert to the form creator's timezone, captured when the field is added.
- specific -- Convert to a specific IANA timezone chosen by the creator.
Validation
The Time field inherits standard input validations. Time-range validation is handled through the minTime and maxTime properties. If a user selects a time outside the allowed range, a validation error is displayed.
Example Usage
A scheduling form that restricts selection to business hours:
{
"type": "time",
"label": "Preferred Meeting Time",
"required": true,
"minTime": "09:00",
"maxTime": "17:00",
"timezoneMode": "utc",
"placeholder": "Select a time"
}