Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Time Input for React

A Meeting Time field with a clock icon inside it. The browser supplies the time control, and no time is filled in.

A Meeting Time label and a clock icon inside a time field. The browser supplies the clock. No time is filled in.

Use it for one time of day, such as a meeting. A calendar that can include the time is a Date Picker. In React, Base UI does not replace the browser's clock.

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

Anatomy

Input anatomy: input, placeholder, value, caret

Usage

<Field className="w-full max-w-sm">
  <FieldLabel htmlFor="time-meeting">Meeting Time</FieldLabel>
  <InputGroup className="bg-background">
    <InputGroupInput id="time-meeting" type="time" />
    <InputGroupAddon>
      <ClockIcon aria-hidden="true" />
    </InputGroupAddon>
  </InputGroup>
</Field>

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.

API Reference

Field

Sets htmlFor="time-meeting". The rest is on the Field page.

Input Group

Sets id="time-meeting" and type="time". The rest is on the Input Group page.

All 24 input examples