The TimePicker component offers a variety of props to control its behavior, appearance, and returned values. Below is a detailed breakdown of each prop and its default value.
| Prop | Type | Default | Description |
|---|---|---|---|
| showSeconds | boolean | false | Whether to display and allow selection of seconds. |
| is12HourFormat | boolean | true | Switch between 12-hour and 24-hour formats. |
| showAMPM | boolean | true | Show AM/PM selection when in 12-hour format. |
| showButtons | boolean | true | Show Cancel and OK buttons at the bottom of the dropdown. |
| align | "bottom" | "top" | "left" | "right" | "bottom" | Alignment of the dropdown relative to the input. |
| onTimeChange | (time: string, isValid: boolean) => void | undefined | Callback fired when the selected time changes. |
| placeholder | string | auto-generated | Custom placeholder text for the input. |
| value | string | number | Date | null | undefined | Controlled value of the time picker. |
| returnType | "string" | "number" | "Date" | auto-detected | Format of the returned value. |
| setValue | (value: any) => void | value => value | Setter for the controlled value. |
| icon | ReactNode | <ClockIcon /> | Custom icon to display inside the input. |
| cancelButtonText | string | "Cancel" | Text for the Cancel button. |
| confirmButtonText | string | "OK" | Text for the OK button. |
| id | string | "arc_timepicker" | Unique ID for the input element. |
| className | string | "" | Custom CSS classes for the wrapper. |
| classNames | object | see below | Custom class names for internal elements (wrapper, input, lists, buttons, etc.). |
The classNames prop accepts an object with the following keys: wrapper, inputWrapper, input, icon, listsMainWrapper, listsWrapper, lists, list, listSelected, buttons, button, buttonCancel, buttonConfirm — each key lets you override the respective element’s styling.
Ready to implement TimePicker in your application? Explore these resources to get started: