Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input examples · Special

Time Input for React

A time field with a clock icon, using the browser's time picker.

Framework
UI library

Times have a format the browser already knows. This example uses an input with type time and a ClockIcon in an InputGroupAddon, so people get the browser's hour and minute picker and the value is always a valid time. Use it for meeting times, reminders, opening hours and booking slots.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What does type time give this field?

The browser's time control: hour and minute segments, AM and PM where the locale uses them, and a picker on most browsers. The value is always HH:mm in 24-hour time, such as 14:30, whatever the display.

How is the icon placed inside the field?

The field is an InputGroup: InputGroupInput is the input and InputGroupAddon holds ClockIcon. The addon comes after the input in the markup and sits at the inline start, so it is on the left in left-to-right text and on the right in right-to-left text. Clicking it focuses the input.

Is the icon read by screen readers?

No. ClockIcon has aria-hidden, because the Meeting Time label already names the field. The icon is a visual hint only.

How is Meeting Time tied to the field?

Clicking the label focuses the field, and screen readers announce it with the field. FieldLabel sets htmlFor to time-meeting, the input's id.

How do I limit the hours?

Set min and max, such as 09:00 and 17:00, and step in seconds, such as 900 for 15-minute slots. The browser checks them when the form is submitted.

Can I hide the browser's own clock icon?

Some browsers add their own picker icon inside the field. Leave it, since it opens the picker, or hide it with the browser's pseudo-element styles if the addon icon is enough.

All 24 input examples