TimePicker

Introduction

The TimePicker component provides a user-friendly interface for selecting a time value, supporting both 12-hour (AM/PM) and 24-hour formats. It features a dropdown for hour and minute selection, customizable minute steps, optional "Now" button, and full integration with reactive signals for controlled usage. The component is suitable for use cases such as appointment booking, alarm setting, scheduling, and more.

Import

import { TimePicker } from '@odyssee/components';

LiveCodeEditor examples

Basic 24-hour and 12-hour TimePicker

Code Éditable

Résultat

Controlled value with signal

Code Éditable

Résultat

Different minute steps

Code Éditable

Résultat

Sizes

Code Éditable

Résultat

Now button and states

Code Éditable

Résultat

Appointment booking use case

Code Éditable

Résultat

---

Props

Prop	Type	Default	Description
value	string | Signal<string>	—	The current time value (controlled or signal).
format	"12h" | "24h"	"24h"	Time format: 12-hour ("12h") or 24-hour ("24h").
label	string	—	Optional label displayed above the input.
hint	string	—	Optional hint text displayed below the input.
error	string	—	Error message displayed below the input.
placeholder	string	"HH:mm" or "hh:mm aa"	Placeholder text for the input, auto-set based on format if not provided.
disabled	boolean	false	Disables the input and dropdown if true.
required	boolean	false	Marks the field as required.
size	"xs" | "sm" | "md" | "lg" | "xl"	"md"	Size of the input and dropdown.
minuteStep	number	1	Step between selectable minutes (e.g., 1, 5, 15, 30).
showNowButton	boolean	true	Whether to show the "Now" button in the dropdown footer.
onChange	(value: string) => void	—	Callback fired when the time value changes.
name	string	—	Name attribute for the input (for forms).
className	string	—	Additional CSS classes for the root element.
id	string	auto-generated	ID for the input element.
...rest	BaseComponentProps	—	Any other base props supported by Odyssee components.

Implementation notes

• The component uses Pulse signals for internal state and supports both controlled (value as signal) and uncontrolled usage.
• Time can be selected via dropdowns for hours, minutes, and (if 12h) AM/PM.
• The minuteStep prop controls the granularity of selectable minutes.
• The "Now" button sets the picker to the current system time, rounded to the nearest minuteStep.
• The dropdown closes when the "OK" button is pressed.
• The input is always read-only; users must use the dropdown to select a time.
• The component auto-generates an id if not provided.
• The TimePickerRadioItem helper is used internally for hour/minute/period selection.
• The component is styled for both light and dark themes.

Accessibility

• The input is associated with its label via for/id.
• The dropdown trigger uses aria-haspopup="menu" and aria-expanded.
• Keyboard navigation is supported for opening/closing the dropdown and selecting values.
• The input is read-only to prevent manual entry errors.
• Error and hint messages are announced for screen readers.
• The component supports required and disabled states with proper ARIA attributes.

Best practices

• Use a minuteStep that matches your use case (e.g., 5 or 15 for appointments, 1 for alarms).
• For controlled usage, use a Pulse signal and update it via onChange.
• Always provide a label for accessibility and clarity.
• Use the error prop for validation feedback.
• Use the hint prop to guide users on expected input or available slots.
• Prefer 24h format for international audiences; use 12h for locales where AM/PM is standard.
• Disable the picker when the time should not be changed (e.g., read-only schedules).

Related links

• Input
• DatePicker
• Pulse Framework documentation
• Odyssee Components documentation