# 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.

## Playground

```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

### 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

1.  **Hour:** two digits.
2.  **Minute:** two digits, after the colon.
3.  **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

## Accessibility

-   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.