Docs
Time Field

Time Field

Time Field allows user to enter time value.

Installation

pnpm dlx cross-env REGISTRY_URL=https://ui-x.junwen-k.dev/r pnpm dlx shadcn@latest add time-field

Usage

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

Examples

Default

With AM/PM

Form

Schedule your event by selecting a time.