On this page
Time
––:–– AM
Props
<TimeField>
<Label>Time</Label>
<DateInput />
</TimeField>Installation
npm
pnpm
yarn
bun
npx shadcn@latest add @dotui/time-fieldUsage
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>Examples
––:–– AM
Appointment time
––:–– AM
Please select a time between 9 AM and 5 PM.Event time
––:–– AM
Meeting time
––:–– AM
Meetings start every 15 minutes.Hour
11 AM
Minute
11:45 AM
Second
11:45:22 AM
Appointment time
10:45 AM
18:45
Event time
––:–– AM
Event time
––:–– AM
––:–– AM
––:–– AM
11:00 AM
Event time
––:–– AM
small (sm)
––:–– AM
medium (md)
––:–– AM
large (lg)
––:–– AM
12:45 AM PST
11:45 AM
11:45 AM
selected time: 11:45:00
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 6/16/2026