308

Time Field

PreviousNext

Time Field allows user to enter time value.

Docs
import {
  TimeField,
  TimeFieldAmPm,

Installation

pnpm dlx shadcn@latest add junwen-k/ui-x/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

import {
  TimeField,
  TimeFieldAmPm,

With AM/PM

import {
  TimeField,
  TimeFieldAmPm,

Form

Schedule your event
Let attendees know when your event takes place.

Schedule your event by selecting a time.

import { Button } from "@/components/ui/button";
import {
  Card,

Accessibility

The field follows the segment keyboard model and labeling guidance described in the Date Time Field accessibility section, including A / P for the meridiem segment.

API Reference

A time-only preset of the Date Time Field — each part wraps its Date Time Field counterpart and accepts the same props.

TimeField

Wraps DateTimeField and accepts all of the Root props (value, onValueChange, hour12, …).

TimeFieldHours, TimeFieldMinutes, TimeFieldSeconds

Wrap the corresponding segments with -- as the default placeholder.

TimeFieldAmPm

Wraps AmPm; renders only when the field has hour12.

TimeFieldSeparator

Wraps the separator with : as the default children.