Command Palette

Search for a command to run...

GitHubGitHub

Time Field

Time Field allows user to enter time value.

Docs
Open in Open in v0

Installation

pnpm dlx shadcn@latest add https://ui-x.junwen-k.dev/r/time-field.json

Usage

import {
  TimeField,
  TimeFieldAmPm,
  TimeFieldHours,
  TimeFieldMinutes,
  TimeFieldSeconds,
  TimeFieldSeparator,
} from "@/components/ui/time-field";
<TimeField>
  <TimeFieldHours />
  <TimeFieldSeparator />
  <TimeFieldMinutes />
  <TimeFieldSeparator />
  <TimeFieldSeconds />
  <TimeFieldAmPm />
</TimeField>

Examples

Default

Open in Open in v0

With AM/PM

Open in Open in v0

Form

Open in Open in v0

Schedule your event by selecting a time.

Password Input

Password Input provides a way for the user to securely enter a password, with the ability to toggle the visibility of the password.

Time

Displays a specific time (or datetime).