Time Input

Forms 3

About

A stepper-style time picker with up/down controls for hours and minutes and an optional AM/PM toggle, for forms like event or showtime scheduling.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Time Input to your project and fits it to your theme.

Code

How Time Input is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import { TimeInput } from "@/components/ui/time-input";

export default function TimeInputDemo() {
  const [time, setTime] = React.useState("20:45");

  return (
    <div className="flex min-h-[320px] w-full items-center justify-center bg-background p-8">
      <div className="flex flex-col items-center gap-4">
        <TimeInput defaultValue="20:45" onValueChange={setTime} />
        <p className="text-sm font-mono text-muted-foreground">
          RESERVED SCREENING:{" "}
          <span className="font-bold text-foreground">{time}</span>
        </p>
      </div>
    </div>
  );
}