Time Picker

Input segmentado de horário (HH:MM ou HH:MM:SS) com navegação por teclado. Cada segmento é um input independente com auto-focus, arrow keys e formatação automática.

valor: 09:30

Utilização

index.tsx
import { TimePicker } from "@convertcompany/ui";

Interações de teclado

TeclaAção
↑ / ↓Incrementa/decrementa o segmento atual (wrap automático: 23 → 0, -1 → 59)
→Pula pro próximo segmento quando o cursor está no fim
←Volta pro segmento anterior quando o cursor está no início
Backspace em segmento vazioVolta pro anterior
Auto-focusAo completar 2 dígitos, foco vai pro próximo segmento
BlurFormata com zero à esquerda (5 → 05) e clampa ao máximo (99 em horas → 23)

Exemplos

Com segundos

valor: 14:45:30

Disabled

Combo Data + Hora

Formato do valor

value é uma string no formato HH:MM ou HH:MM:SS:

index.tsx
const [time, setTime] = useState("09:30");      // sem segundos
const [time2, setTime2] = useState("14:45:30"); // com segundos

Durante a digitação, segmentos parciais são emitidos sem padding ("9:30"). Ao perder foco, são normalizados ("09:30").

Props

PropriedadeTipo
valueHorário no formato "HH:MM" ou "HH:MM:SS" dependendo de showSeconds.
string
onChangeCallback ao mudar o valor.
(value: string) => void
showSecondsExibe o segmento de segundos. Default false.
boolean
disabledDesabilita os inputs.
boolean
classNameClasse CSS adicional para o container.
string
...propsDemais props nativas do <div>.
HTMLAttributes<HTMLDivElement>