ui
Time Picker
A time picker component with scrollable columns for hours, minutes, and seconds selection. Supports both 12-hour and 24-hour formats with customizable seconds display.
1. Import
Import the Time Picker component from the design system.
import { TimePicker, type TimeValue } from "@/design-system/components/ui/time-picker"2. Props
Time Picker component props.
| Prop | Type | Default |
|---|---|---|
| value | TimeValue | -- |
| onChange | (value: TimeValue) => void | -- |
| showSeconds | boolean | true |
| className | string | -- |
3. Types
Type definitions used by the Time Picker component.
TimeValue
export type TimeValue = {
hour: string;
minute: string;
second: string;
};4. Usages
Common Time Picker patterns and configurations.
09:30:00
import { TimePicker, type TimeValue } from "@/design-system/components/ui/time-picker";
import { useState } from "react";
function Example() {
const [value, setValue] = useState<TimeValue>({
hour: "09",
minute: "30",
second: "00"
});
return (
<div className="h-80">
<TimePicker
value={value}
onChange={setValue}
/>
</div>
);
}