<TimeField aria-label="Event time">
<DateInput />
</TimeField>npx shadcn@latest add @dotui/time-fieldUse 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>Use the controls below to experiment with different time field props and see the live preview and code update.
<TimeField>
<Label>Time</Label>
<DateInput />
</TimeField>selected time: 11:45:00
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 | — | ||
DOMRenderFunction<"div", DateFieldRenderProps> | — | ||
boolean | — | ||
T | null | — | ||
T | null | — | ||
function | — | ||
Last updated on 5/22/2026