TimePicker

Time selection dropdown.

formtimeinput

Import

import { TimePicker } from "@/components/ui";

Basic Usage

TimePicker Preview

Meeting time

Code

tsx

const [time, setTime] = useState(null);

return (
  <TimePicker
    value={time}
    onChange={setTime}
    placeholder="Select time"
  />
);

24-Hour Format

Use 24-hour time format

1<TimePicker
2  value={time}
3  onChange={setTime}
4  format="24h"
5  placeholder="HH:MM"
6/>

Custom Minute Step

Change minute increment

1<TimePicker
2  value={time}
3  onChange={setTime}
4  minuteStep={30}
5  placeholder="Select time (30 min intervals)"
6/>

With Label

Using FieldWrapper

1<FieldWrapper label="Meeting Time" required>
2  <TimePicker
3    value={time}
4    onChange={setTime}
5    placeholder="Select meeting time"
6  />
7</FieldWrapper>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring