TimePicker

Form

A labeled native time input with minute or second precision.

Controlled minutesSeconds precisionTime boundsDisabled schedule

Responsive viewport — resize the window to explore. Direction and density apply only to this preview. Theme applies to the docs too.

time-picker.tsx

"use client";

import { TimePicker } from "@/components/ui/time-picker";
import { useState } from "react";

export default function TimePickerExample() {
  const [time, setTime] = useState("10:30");
  return (
    <div className="w-full max-w-xs space-y-5">
      <TimePicker
        label="Meeting time"
        value={time}
        onChange={(event) => setTime(event.target.value)}
        min="09:00"
        max="18:00"
      />
      <TimePicker label="Precise start time" defaultValue="14:30:15" step={1} />
      <TimePicker label="Managed schedule" defaultValue="09:00" disabled />
      <p role="status" className="text-xs text-muted-foreground">
        Selected: {time || "No time"}. Stored as local time, without a date or
        timezone.
      </p>
    </div>
  );
}

Usage

Use value/onChange or defaultValue with a local HH:mm string. Set step in seconds for finer precision. This input represents a time of day without a date or timezone; perform any timezone conversion in your application.

Import

import { TimePicker } from "@/components/ui/time-picker";

Shipped as editable source in src/components/ui/time-picker.tsx in both apps. Copy the implementation below when moving it to another project. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

Component source

The complete implementation is included in both apps. It uses the React, Radix, Lucide, and shared-core dependencies already installed in Apex. Keep your project’s semantic theme tokens when reusing it.

src/components/ui/time-picker.tsx

"use client";
import { useId, type ComponentProps } from "react";
import { Input } from "@dashboardpack/core/components/ui/input";
import { Label } from "@dashboardpack/core/components/ui/label";
import { cn } from "@dashboardpack/core/lib/utils";
export function TimePicker({
  label,
  className,
  id,
  step = 60,
  ...props
}: Omit<ComponentProps<"input">, "type"> & { label: string }) {
  const generated = useId();
  const controlId = id ?? generated;
  return (
    <div className={cn("space-y-2", className)}>
      <Label htmlFor={controlId}>{label}</Label>
      <Input id={controlId} type="time" step={step} {...props} />
    </div>
  );
}

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

TimePicker props
Prop	Type / Default	Description
label	`string` Default: required	Visible field name.
value / defaultValue	`string` Default: —	Local HH:mm or HH:mm:ss value.
onChange	`ChangeEventHandler<HTMLInputElement>` Default: —	Native input change callback.
step	`number` Default: 60	Precision in seconds.
min / max	`string` Default: —	Native local-time bounds.
disabled / required / name	`native input attributes` Default: —	Native form behavior.

Build with these too

Date Picker Field