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 |
|---|---|---|---|
| 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.). |
| clockClassNames | object | see below | Custom class names for clock elements (clock, hand, numbers, etc.). |
The classNames prop accepts an object with the following keys: wrapper, modeWrapper, modeButtons, modeButtonHour, modeButton, modeButtonMinute, formatButtons, formatButton, formatActiveButton, contentWrapper, content, times, time, timeActive, timesCenter, timesCenterPoint, handle, modeDivider — each key lets you override the respective element’s styling.
Ready to implement Clock in your application? Explore these resources to get started: