Time Picker
A time picker component for selecting hours, minutes, and optionally seconds. Supports both 12-hour and 24-hour formats with a popover interface for easy time selection.
Installation
Import
Usage
The TimePicker component is ideal for scheduling applications, booking systems, event management, and any interface requiring time input. Use 24-hour format for international applications or when precision is important. Use 12-hour format for consumer-facing applications in regions where it's standard. Include seconds when precise timing is required, such as in scientific or technical applications. For form integration with validation and error handling, use TimePickerField which extends TimePicker and integrates with Conform forms. TimePickerField automatically displays validation errors from form schemas and provides label, topText, and other form-specific props for enhanced form UX.
Design Guidelines
The time picker uses a clean input field that opens a popover with time selection controls. The popover displays hour, minute, and optionally second selectors. The component supports keyboard navigation and provides clear visual feedback. The input displays the selected time in a formatted string. Ensure adequate spacing and consider the popover positioning relative to the input field.
Basic Usage
Simple time picker with default 24-hour format
12-Hour Format
Time picker using 12-hour format with AM/PM
With Seconds
Time picker including seconds selection
Different Sizes
Time picker in different input sizes
With Date Value
Time picker initialized with a Date object
24-Hour with Seconds
Full time picker with 24-hour format and seconds
Form Integration - Work Schedule
TimePickerField with form integration, labels, and validation
Form Integration - Event Timing
Event form with date and time selection
Form Integration - 24-Hour Format
Time picker form using 24-hour format for international applications
TimePickerField
TimePickerField extends TimePicker with form integration, labels, error handling, and validation support. Use TimePickerField when building forms with Conform. extends TimePicker. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
field | FieldMetadata | — | Conform field metadata for form integration and validation |
label | string | React.ReactNode | — | Label text displayed above the time picker field |
topText | string | React.ReactNode | — | Helper text displayed above the label |
labelProps | React.LabelHTMLAttributes<HTMLLabelElement> | — | Additional props for the label element |
inputClass | string | — | Additional CSS classes for the input element |
wrapperClassName | string | — | Additional CSS classes for the wrapper element |
inputRef | React.Ref<HTMLInputElement> | — | Ref forwarded to the input element |
className | string | — | Additional CSS classes to apply to the component |
API Reference
Comprehensive API documentation for all exports and utilities. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
value | string | { hour: string; min: string; sec?: string; string: string } | Date | "" | The selected time value. Can be a time string, time object, or Date |
onChange | (time: { hour: string; min: string; sec?: string; string: string }) => void | - | Callback fired when the time changes |
showSeconds | boolean | false | Whether to include seconds in the time selection |
use24Hour | boolean | false | Whether to use 24-hour format (true) or 12-hour format with AM/PM (false) |
placeholder | string | "Select time" | Placeholder text for the input field |
size | "sm" | "md" | "lg" | "md" | Size of the time picker input |
inputProps | TimePickerInputProps | {} | Additional props to pass to the input component |
contentProps | TimePopoverProps["contentProps"] | {} | Additional props to pass to the popover content |
className | string | — | Additional CSS classes to apply to the component |