# TimeInput

Um horário numa caixa só: hora e minuto e, no formato de 12 horas, AM ou PM. O formato é do produto, não do sistema de quem usa.

## Playground

```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" value="19" aria-label="Hora"><span class="sep" aria-hidden="true">:</span><input class="seg" inputmode="numeric" maxlength="2" value="30" aria-label="Minuto"></div></fieldset>
```

## Quando usar

-   Para qualquer horário que a pessoa digita: um lembrete, um agendamento.

## Quando não usar

-   **Para poucos horários fixos** (manhã, tarde, noite): Radios.
-   **O campo de hora do navegador** (`type="time"`): segue o formato do sistema de quem usa, que o produto não consegue escolher, e cada navegador desenha de um jeito.

## Exemplos

### 24 ou 12 horas

O formato vem do atributo `data-hour-cycle`. No de 12 horas, o AM/PM fica dentro da caixa, e um toque troca.

Mostrar código

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

## Anatomia

1.  **Hora:** dois dígitos.
2.  **Minuto:** dois dígitos, depois dos dois-pontos.
3.  **AM ou PM:** só no formato de 12 horas; um toque troca.

## Estados

Vazio

Preenchido, 24h

Preenchido, 12h

Erro no minuto

Use um minuto entre 00 e 59

## Acessibilidade

-   O grupo é um Fieldset com a pergunta; cada parte tem o próprio nome ("Hora", "Minuto", "AM ou PM").
-   O erro diz qual parte corrigir e marca só ela.
-   A caixa inteira mostra o contorno de foco.

## Atributos

Atributo

Valores

Para quê

`class="feitio-time-field"`

obrigatório

A caixa com as partes.

`data-hour-cycle`

`"24"`, `"12"`

O formato, escolhido pelo produto.

`class="seg"`

hora e minuto

Com `inputmode="numeric"` e `maxlength="2"`.

`class="period"`

o botão AM/PM

Só aparece no formato de 12 horas.

`aria-invalid="true"`

só na parte errada

Marca só a hora ou só o minuto.