ObjectUIFields
Time Field
Time-only input field for hour and minute selection
The Time Field component provides a time-only input for collecting hour and minute information without a date component.
Basic Usage
Basic Time Field
{
"type": "time",
"name": "start_time",
"label": "Start Time",
"placeholder": "HH:MM"
}With Default Value
With Default Value
{
"type": "time",
"name": "office_hours",
"label": "Office Hours",
"value": "09:00"
}Required Field
Required Time
{
"type": "time",
"name": "alarm_time",
"label": "Alarm Time",
"required": true
}Read-Only
Read-Only Time
{
"type": "time",
"name": "closing_time",
"label": "Closing Time",
"value": "18:00",
"readonly": true
}Field Schema
interface TimeFieldSchema {
type: 'time';
name: string; // Field name/ID
label?: string; // Field label
placeholder?: string; // Placeholder text
value?: string; // Default value (HH:mm format)
required?: boolean; // Is field required
readonly?: boolean; // Read-only mode
disabled?: boolean; // Disabled state
className?: string; // Additional CSS classes
// Validation
format?: string; // Display format
}Time Format
The time field uses 24-hour format: HH:mm
Examples:
09:00- 9:00 AM14:30- 2:30 PM23:45- 11:45 PM
Use Cases
- Operating Hours: Business hours, shift times
- Scheduling: Daily task times, recurring events
- Alarms: Reminder times, notification schedules
- Time Tracking: Work start/end times