Time field
Campo de hora que recebe um horário digitado em segmentos de hora e minuto, no relógio do idioma. Leva o fuso horário quando o valor tem um, então uma reunião às 14:00 é o mesmo momento para todo mundo.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Time é um horário do dia; ZonedDateTime acrescenta data e fuso horário. Os dois são reexportados pelo pacote.
import { TimeField, Time, ZonedDateTime, Field, FieldLabel } from "@camaleo/react";Anatomia
As mesmas partes do DateField: uma caixa com um segmento para cada parte do horário, e separadores como : entre eles.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Aparece na página da loja e no Maps.
Duração: 2 h 30 min
Início e fim
Mude qualquer um dos horários. Dois campos controlados dão a duração, e o fim fica inválido quando vem antes do início.
Dentro do expediente
Escolha um horário das 08:00 às 18:00. minValue e maxValue marcam o resto como inválido, e o FieldError diz a faixa aceita.
12 ou 24 horas
O idioma escolhe o relógio. O hourCycle força um deles, para uma grade de horários ou um público que espera aquele formato.
Horas, minutos e segundos do vídeo.
Segundos
O granularity="second" acrescenta um segmento para marcações de tempo e durações. Use "hour" quando só a hora importa.
No fuso de quem organiza.
Com fuso horário
Um ZonedDateTime mostra o fuso num segmento só de leitura, então quem está em outra cidade sabe de quem são as 10:00. O hideTimeZone esconde ele.
Aperte a seta para cima: começa às 07:00, não à meia-noite.
Valor de partida
Num campo vazio, as setas começam da meia-noite. O placeholderValue começa num horário provável, sem preencher nada.
Definido pelo hotel. Peça um horário mais tarde na recepção.
Somente leitura
O readOnly mantém o horário focável e lido pelo leitor de tela. Diga quem define ele.
Em contexto
Horários vêm com datas e agendas. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Horário de funcionamento
Café Aurora · Rua da Aurora, 12
Resumo diário
Um e-mail com as vendas de ontem e os pedidos de hoje.
No seu fuso, Brasília (BRT).
Boas práticas
Um ZonedDateTime escreve o fuso ao lado do horário, então ninguém entra uma hora antes.
Cada pessoa lê "10:00" no próprio fuso, e a maioria erra.
Início e fim são validados e lidos cada um por si.
"10h30 às 10h45, mais ou menos" não dá para interpretar, ordenar nem conferir.
Props
Field, vale o disabled do field quando este não é passado.Field, vale o invalid do field quando este não é passado."pt-BR" ou "en-US". Sem ele, vale o I18nProvider mais próximo ou o idioma do navegador.null quando um segmento é apagado."minute".ZonedDateTime.TimeValue é Time, CalendarDateTime ou ZonedDateTime; o tipo que você passa é o tipo que volta no onChange. O validationBehavior tem padrão "aria": um horário fora dos limites marca o campo como inválido, mas nunca bloqueia o formulário.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio campo.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
/* um rótulo de fuso mais discreto */
[data-slot="time-field"] [data-type="timeZoneName"] {
color: var(--cml-fg-muted);
font-size: 0.875em;
}Acessibilidade
- Cada segmento é um spinbutton com o nome da sua parte (hora, minuto, AM/PM) e o rótulo do campo.
- O valor inteiro é lido como texto, como "10:00 BRT", com o fuso incluído.
- FieldDescription e FieldError ficam ligados pelo aria-describedby, e um campo inválido marca aria-invalid.
- Passe sempre o locale: assim o servidor e o navegador formatam igual, e o relógio segue o idioma da página.