TimeInput

TimeInput aceita uma hora de 24 horas sem abrir um picker. Escolha-o quando digitar um valor preciso for o caminho eficiente; use TimePicker quando a pessoa precisar navegar por uma lista de horários disponíveis.

Exemplos

Uma hora de 24 horas normalizada

A pessoa pode digitar 9, 0930 ou 9:5. Blur ou Enter interpreta uma entrada válida, normaliza para HH:mm e chama onChange com esse valor.

Start timeEnter a 24-hour time, such as 09:30.

Limites e incrementos

min e max limitam valores confirmados e ajustados. As setas e os steppers avançam por step; mantenha Shift com uma seta para avançar uma hora.

Appointment time

Controles falados traduzidos

Use labels para substituir os nomes ingleses dos steppers e fornecer o aria-valuetext falado de uma hora selecionada. Labels não especificados mantêm os padrões em inglês.

Reminder time

Quando usar

Use TimeInput quando a pessoa conhece ou consegue digitar com eficiência uma única hora de 24 horas.

Prefira outro componente quando:

Os horários disponíveis precisam ser navegados em uma lista — use TimePicker, feito para esse fluxo de seleção.
Só é necessária uma data — use um controle específico de data em vez de aceitar uma hora ambígua.
Uma duração está sendo informada — use campos de duração separados ou um controle que nomeia unidades, em vez de tratá-la como uma hora do relógio.

Acessibilidade

Renderiza um input de texto com role="spinbutton", input mode numérico e aria-valuemin, aria-valuemax e aria-valuenow em minutos. Um label fornecido é conectado por htmlFor.
Os dois botões de stepper para mouse saem da ordem de tabulação; quem usa teclado ajusta o input em foco com ArrowUp e ArrowDown. Shift mais uma seta move uma hora.
Um valor selecionado recebe aria-valuetext de labels.valueText; use labels para traduzir os nomes ingleses padrão dos steppers e o valor falado.
Texto inválido é preservado intencionalmente em blur ou Enter, marcado como inválido e não chama onChange. Um valor válido é normalizado e confirmado; um valor vazio intencional confirma null.
error substitui hint, é conectado por aria-describedby e define aria-invalid. invalid pode definir a aparência de inválido sem uma mensagem de erro visível.

API e código

Nome	Tipo	Obrigatória	Descrição
`label`	`string`	—	Label rendered above the input and connected with htmlFor.
`hint`	`string`	—	Helper text rendered below the input. Replaced by error when present.
`error`	`string`	—	Error message that enables error styling and replaces hint.
`value`	`string \| null`	—	Controlled 24-hour HH:mm value, or null for no selected time.
`defaultValue`	`string`	—	Initial 24-hour HH:mm value in uncontrolled mode.
`onChange`	`(time: string \| null) => void`	—	Called with a normalized HH:mm value, or null after the field is cleared.
`step`	`number`	—	Minutes added or subtracted by the steppers and Arrow keys. Default: 15.
`min`	`string`	—	Inclusive HH:mm lower limit. Values below it are clamped.
`max`	`string`	—	Inclusive HH:mm upper limit. Values above it are clamped.
`size`	`'sm' \| 'md' \| 'lg'`	—	Control height. Default: "md".
`invalid`	`boolean`	—	Enables invalid styling and aria-invalid without an error message.
`labels`	`TimeInputLabels`	—	Translatable accessible labels, merged over the English defaults.
`disabled`	`boolean`	—	Disables the input and steppers.

x-data="lyraTimeInput({ … })"

Opção	Tipo	Obrigatória	Descrição
`defaultValue`	`string`	—	Initial 24-hour HH:mm value, or no selection when omitted.
`step`	`number`	—	Minutes added or subtracted by steppers and Arrow keys. Default: `15`.
`min`	`string`	—	Inclusive 24-hour HH:mm lower limit.
`max`	`string`	—	Inclusive 24-hour HH:mm upper limit.
`invalid`	`boolean`	—	Enables consumer-driven invalid styling and `aria-invalid`.
`valueText`	`(hours: number, minutes: number) => string`	—	Spoken value for a selected time.

Sem React, use a mesma estrutura e implemente interpretação, limite e comportamento de teclado:

html

<div class="lyra-field">
  <label class="lyra-label" for="start-time">Start time</label>
  <span class="lyra-timeinput">
    <input
      class="lyra-input"
      id="start-time"
      type="text"
      role="spinbutton"
      inputmode="numeric"
      aria-valuemin="0"
      aria-valuemax="1439"
      aria-valuenow="570"
      aria-valuetext="9 hours and 30 minutes"
      value="09:30"
    />
    <span class="lyra-timeinput__steppers">
      <button class="lyra-timeinput__step" type="button" tabindex="-1" aria-label="Later">▲</button>
      <button class="lyra-timeinput__step" type="button" tabindex="-1" aria-label="Earlier">
        ▼
      </button>
    </span>
  </span>
  <span class="lyra-hint">Enter a 24-hour time.</span>
</div>

<lyra:time-input> Gerado do lyra-ds/blade v0.10.0.

O comportamento vem de lyraTimeInput() — instale @lyra-ds/alpine e veja a aba HTML + Alpine.

Prop	Padrão	Obrigatória	Valores de exemplo
`label`	`null`	—	`Start time`
`hint`	`null`	—	`Use 24-hour time`
`error`	`null`	—	`Invalid` `Invalid time`
`value`	`null`	—	—
`defaultValue`	`null`	—	—
`step`	`15`	—	—
`min`	`null`	—	—
`max`	`null`	—	—
`size`	`'md'`	—	`lg` `sm`
`invalid`	`false`	—	—
`labels`	`[]`	—	—
`disabled`	`false`	—	—

blade

<lyra:time-input
    name="start_time"
    label="Start time"
    default-value="09:00"
    :step="15"
    min="08:00"
    max="18:00"
    size="md"
/>