TimeInput

A time in a single box: hour and minute and, in the 12-hour format, AM or PM. The format belongs to the product, not to the user’s system.

On this page

Playground

When to remind?

Clock

State

Background

HTML

<fieldset class="feitio-fieldset"><legend class="feitio-label">When to remind?</legend><div class="feitio-time-field" data-hour-cycle="24"><input class="seg" inputmode="numeric" maxlength="2" value="19" aria-label="Hour"><span class="sep" aria-hidden="true">:</span><input class="seg" inputmode="numeric" maxlength="2" value="30" aria-label="Minute"></div></fieldset>

When to use

For any time the person types: a reminder, a schedule.

When not to use

For a few fixed times (morning, afternoon, evening): Radios.
The browser’s time field (type="time"): it follows the user’s system format, which the product cannot choose, and every browser draws it differently.

Examples

When to remind?

24 or 12 hours

The format comes from the data-hour-cycle attribute. In the 12-hour one, AM/PM sits inside the box, and a tap switches it.

Show code

HTML

<fieldset class="feitio-fieldset">
  <legend class="feitio-label">Quando lembrar?</legend>
  <div class="feitio-time-field" data-hour-cycle="24">
    <input class="seg" inputmode="numeric" maxlength="2" aria-label="Hora">
    <span class="sep" aria-hidden="true">:</span>
    <input class="seg" inputmode="numeric" maxlength="2" aria-label="Minuto">
    <button type="button" class="period" aria-label="AM ou PM">AM</button>
  </div>
</fieldset>

Anatomy

Hour: two digits.
Minute: two digits, after the colon.
AM or PM: only in the 12-hour format; a tap switches it.

States

Empty

Filled, 24h

Filled, 12h

Error in the minute

Use a minute between 00 and 59

The group is a Fieldset with the question; each part has its own name ("Hour", "Minute", "AM or PM").
The error says which part to fix and marks only that one.
The whole box shows the focus outline.

Attributes

Attribute	Values	What for
`class="feitio-time-field"`	required	The box with its parts.
`data-hour-cycle`	`"24"`, `"12"`	The format, chosen by the product.
`class="seg"`	hour and minute	With `inputmode="numeric"` and `maxlength="2"`.
`class="period"`	the AM/PM button	Only shows in the 12-hour format.
`aria-invalid="true"`	only on the wrong part	Marks only the hour or only the minute.