The TIME component provides a time input field for entering hours and minutes, with optional 12-hour format (AM/PM) and a configurable timepicker dropdown.
🛝 Use the Dynamic Form Playground to see the Time component in action and try out different configurations
| Property | Type | Required | Description |
|---|---|---|---|
type | 'TIME' | Yes | Specifies the field type as TIME. |
id | string | Yes | Unique identifier for the field. The field's value is stored in the form state under this key. |
renderName | string | No | Optional name added as data-render-name attribute to locate the rendered element in the DOM. |
label | string | Yes | Label text displayed above the field. Supports translation and string interpolation. |
value | string | No | Initial value of the field. Accepts HH:mm 24-hour format (e.g. '09:00', '17:30'). |
hint | string | No | Additional hint text displayed below the field. |
note | string | No | Informational note displayed when there are no errors. |
infoIcon | DfInfoIconConfig | No | Info icon with popover. Object with popoverText (string, required) and popoverDirection ('top', 'bottom', 'left', 'right'). |
validators | array | No | Validation rules for the field. Supported types: REQUIRED, MIN_TIME, MAX_TIME, DYNAMIC_MIN_TIME, DYNAMIC_MAX_TIME. Each validator has type and optional errorMessage. For MIN_TIME, use minTime property; for MAX_TIME, use maxTime property. Accepts HH:mm 24-hour format (e.g. '09:00', '17:30'). |
testId | string | No | Test identifier for automated testing. Set as data-testid attribute. |
acl | array | No | Access control rules for field visibility/editability. Each rule has state ('hidden', 'readonly', 'disabled', 'visible', 'editable') and optional condition (Filtrex expression). |
columnSpan | number | No | Number of columns to span (1-12) in CUSTOM_COLUMN layout. Default: 12 (full width). |
spacing | string | No | Margin spacing before next field: 'NONE' (0px), 'XS' (8px), 'S' (16px), 'M' (24px), 'L' (32px), 'XL' (40px), 'XXL' (48px). |
| Property | Type | Required | Description |
|---|---|---|---|
twelveHourFormat | boolean | Yes | Whether to show the time in 12-hour format with AM/PM toggle. Default: false |
withTimepicker | boolean | Yes | Whether to show the timepicker dropdown toggle button. Default: false |
layout | object | No | The layout of the field. See also Layout Properties |
optionalLabel | string | No | Text that is additionally displayed in the label if the field is not mandatory and supports string interpolation. |
placeholderHours | string | No | Sets the placeholder of hours field. Default: "hh". |
placeholderMinutes | string | No | Sets the placeholder of minutes field. Default: "mm". |
labelAM | string | No | Sets the AM button label. Default: "AM". |
labelPM | string | No | Sets the PM button label. Default: "PM". |
pickerEndTime | string | No | The latest time shown in the timepicker dropdown, in HH:mm format. Default: "24:00". |
pickerStartTime | string | No | The earliest time shown in the timepicker dropdown, in HH:mm format. Default: "00:00". |
pickerTimeInterval | number | No | The interval in minutes between options in the timepicker dropdown. Must be at least 1 minute. Default: 30. |
| Property | Type | Required | Description |
|---|---|---|---|
centerAlignInRetail | boolean | No | Controls the field alignment for "CUSTOM_COLUMN" layout in retail journeys. Set to true to center-align the field. Defaults to left alignment.Ignored in expert journeys and other pre-defined layouts, which always use left alignment. |
{
"id": "appointmentTime",
"type": "TIME",
"label": "Appointment Time",
"validators": [
{
"type": "REQUIRED",
"errorMessage": "Please enter a time"
}
]
}{
"id": "meetingTime",
"type": "TIME",
"label": "Meeting Time",
"twelveHourFormat": true,
"labelAM": "AM",
"labelPM": "PM"
}{
"id": "deliveryTime",
"type": "TIME",
"label": "Preferred Delivery Time",
"withTimepicker": true,
"validators": [
{
"type": "REQUIRED",
"errorMessage": "Please select a delivery time"
}
]
}{
"id": "officeHoursTime",
"type": "TIME",
"label": "Office Hours",
"withTimepicker": true,
"pickerStartTime": "08:00",
"pickerEndTime": "18:00",
"pickerTimeInterval": 15
}{
"id": "startTime",
"type": "TIME",
"label": "Start Time",
"placeholderHours": "HH",
"placeholderMinutes": "MM",
"optionalLabel": "Optional"
}Use MIN_TIME and MAX_TIME to enforce a valid time range on manual input. The value must be in HH:mm 24-hour format. To also restrict the picker dropdown to the same range, set pickerStartTime and pickerEndTime to matching values.
{
"id": "appointmentTime",
"type": "TIME",
"label": "Appointment Time",
"withTimepicker": true,
"pickerStartTime": "09:00",
"pickerEndTime": "17:00",
"validators": [
{
"type": "MIN_TIME",
"minTime": "09:00",
"errorMessage": "Please select a time after 09:00"
},
{
"type": "MAX_TIME",
"maxTime": "17:00",
"errorMessage": "Please select a time before 17:00"
}
]
}For complete API documentation, see the configuration interfaces:
For Aquila component documentation and design guidelines, see Time Field - Aquila Design System.