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

<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

<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

Estados

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