TimePicker Component
A dependency-free time picker built the same way as DatePicker: an Input-style trigger opening a popover list of selectable times. Values are plain Date objects, so pairing it with a DatePicker for a full datetime is just two fields writing into the same Date.
Import
1import { TimePicker } from "@neuctra/ui";Basic Usage
No time selected
Custom Step & Hour Range
step controls the minute granularity of the list; minHour/maxHour constrain which hours are offered (e.g. business hours only).
15-minute slots, 9 AM - 5 PM
Custom Format
formatTime overrides the default locale HH:MM display.
Props
All available props for the TimePicker component.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | Date | null | null | Controlled / uncontrolled selection |
| onChange | (date: Date | null) => void | — | Fired with a Date carrying the picked hour/minute; preserves the rest of an existing value's date |
| placeholder | string | "Pick a time" | Trigger text while empty |
| formatTime | (date: Date) => string | locale HH:MM | Display formatting for the trigger and option list |
| step | number | 30 | Minutes between each selectable option |
| minHour / maxHour | number | 0 / 23 | Restrict the hour range offered in the list |
| clearable | boolean | false | Inline clear button while a time is set |
| label / error / helperText | string | — | Standard field furniture |
| size | "sm" | "md" | "lg" | "md" | Trigger height |
| disabled | boolean | false | Disables the field |
| id / className / wrapperClassName | string | — | Field id and outer styling hooks |
| labelClassName | string | — | Styles the field label |
| iconClassName | string | — | Styles the clock icon in the trigger |
| textClassName | string | — | Styles the displayed time text |
| clearButtonClassName | string | — | Styles the clear button |
| clearIconClassName | string | — | Styles the icon inside the clear button |
| panelClassName | string | — | Styles the popover panel containing the time list |
| optionClassName | string | — | Styles every time option button |
| activeOptionClassName | string | — | Styles the currently selected time option, in addition to its active styling |
| helperClassName | string | — | Styles the helper/error text below the trigger |
Accessibility
- The trigger exposes aria-haspopup="dialog" / aria-expanded; the panel is a labelled dialog closed by Escape or outside click.
- Every time option is a real, individually focusable button with aria-selected on the active one, so no custom keyboard handling is needed for Tab/Enter/Space.
- The panel scrolls the currently selected (or nearest) option into view when opened, instead of always starting at the top of the list.
Frequently Asked Questions
How do I install and import the TimePicker component?
Install the @neuctra/ui package, then import it with: import { TimePicker } from "@neuctra/ui";
What variants and sizes does TimePicker support?
TimePicker supports sizes: sm, md, lg. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the TimePicker component accessible?
TimePicker is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.