Time Picker

A time picker combines a time field and a scrollable column popover to allow users to select a time.

On this page

930AM

<TimePicker
  className="w-40"
  aria-label="Event time"
  defaultValue={new Time(9, 30)}
>
  <InputGroup>
    <DateInput />
    <InputGroupAddon>
      <Button
        variant="default"
        size="sm"
        isIconOnly
        aria-label="Choose time"
      >
        <ClockIcon />
      </Button>
    </InputGroupAddon>
  </InputGroup>
  <Popover>
    <DialogContent>
      <TimePickerColumns />
    </DialogContent>
  </Popover>
</TimePicker>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/time-picker

Usage

Use time pickers to allow users to select a time using a field and a scrollable column popover.

import { ClockIcon } from 'lucide-react'

import { Button } from '@/components/ui/button'
import { DialogContent } from '@/components/ui/dialog'
import { Label } from '@/components/ui/field'
import { DateInput, InputGroup, InputGroupAddon } from '@/components/ui/input'
import { Popover } from '@/components/ui/popover'
import { TimePicker, TimePickerColumns } from '@/components/ui/time-picker'

<TimePicker>
  <Label>Time</Label>
  <InputGroup>
    <DateInput />
    <InputGroupAddon>
      <Button variant="default" size="sm" isIconOnly aria-label="Choose time">
        <ClockIcon />
      </Button>
    </InputGroupAddon>
  </InputGroup>
  <Popover>
    <DialogContent>
      <TimePickerColumns />
    </DialogContent>
  </Popover>
</TimePicker>

Examples

Basic

930AM

With Label & Description

Event time

––––AM

Please select a time.

Granularity

hour

11AM

minute

1145AM

second

114530AM

Hour Cycle

12-hour

230PM

24-hour

1430

API Reference

TimePicker

A time picker combines a TimeField and a scrollable time-column popover to allow users to enter or select a time value.

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

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

Last updated on 7/1/2026