Time Input
FormsA time input component for selecting hours and minutes. Supports both 12-hour and 24-hour formats.
Import
import { TimeInput } from "@/components/ui/time-input";Usage
12-Hour Format
Default format with AM/PM toggle
Selected: 09:00
24-Hour Format
Military time format without AM/PM
With Error
Display validation errors
Please select a time during business hours
Disabled
Disabled state
API Reference
valueundefined{ hours: number; minutes: number }Controlled time value
defaultValue{ hours: 12, minutes: 0 }{ hours: number; minutes: number }Default time for uncontrolled usage
onValueChangeundefined(time: TimeValue) => voidCallback when time value changes
labelundefinedstringLabel text displayed above the input
use24HourfalsebooleanUse 24-hour format instead of 12-hour with AM/PM
placeholder"12:00"stringPlaceholder text
errorundefinedstringError message to display
disabledfalsebooleanWhether the input is disabled
| Prop | Type | Default | Description |
|---|---|---|---|
value | { hours: number; minutes: number } | undefined | Controlled time value |
defaultValue | { hours: number; minutes: number } | { hours: 12, minutes: 0 } | Default time for uncontrolled usage |
onValueChange | (time: TimeValue) => void | undefined | Callback when time value changes |
label | string | undefined | Label text displayed above the input |
use24Hour | boolean | false | Use 24-hour format instead of 12-hour with AM/PM |
placeholder | string | "12:00" | Placeholder text |
error | string | undefined | Error message to display |
disabled | boolean | false | Whether the input is disabled |