Time Field

A time field allows users to enter and edit time values using a keyboard.

Time

––––AM

<TimeField className="max-w-xs">
  <Label>Time</Label>
  <DateInput />
</TimeField>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/time-field

Usage

Use TimeField to allow users to enter and edit time values using a keyboard.

import { TimeField } from '@/components/ui/time-field'
import { DateInput } from '@/components/ui/input'
import { Label } from '@/components/ui/field'

<TimeField>
  <Label>Time</Label>
  <DateInput />
</TimeField>

Anatomy

TimeField wraps a Label, the DateInput that holds the editable time segments, and an optional Description or FieldError.

import { TimeField } from '@/components/ui/time-field'
import { DateInput } from '@/components/ui/input'
import { Label, Description, FieldError } from '@/components/ui/field'
;<TimeField>
  <Label />
  <DateInput />
  <Description />
  <FieldError />
</TimeField>

Value

Values are Time objects from @internationalized/date. Use defaultValue for uncontrolled state, or value with onChange to control it. Parse a string with parseTime.

import { Time } from '@internationalized/date'
;<TimeField defaultValue={new Time(11, 45)}>
  <Label>Time</Label>
  <DateInput />
</TimeField>

Granularity

granularity sets the smallest editable segment — hour, minute (the default), or second.

<TimeField granularity="second" defaultValue={new Time(11, 45, 22)}>
  <Label>Time</Label>
  <DateInput />
</TimeField>

Hour cycle

hourCycle forces 12- or 24-hour display regardless of the locale.

<TimeField hourCycle={24} defaultValue={new Time(18, 45)}>
  <Label>Time</Label>
  <DateInput />
</TimeField>

Validation

Set isRequired or isInvalid and render messages with FieldError; minValue and maxValue constrain the allowed time.

<TimeField isRequired minValue={new Time(9)} maxValue={new Time(17)}>
  <Label>Meeting time</Label>
  <DateInput />
  <FieldError />
</TimeField>

Examples

Basic Time Field

––––AM

With Icon

––––AM

Time Zones

1245AMPST

API Reference

A time field allows users to enter and edit time values using a keyboard. Each part of a time value is displayed in an individually editable segment.

Prop	Type	Default
	`ReactNode \| function`	`—`
	`"hour" \| "minute" \| "second"`	`'minute'`
	`boolean`	`—`
	`12 \| 24`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`T`	`—`
	`boolean`	`—`

	`T \| null`	`—`
	`T \| null`	`—`
	`function`	`—`

Last updated on 7/7/2026