Pular para o conteúdo
Camaleo
PT · ENGitHub
// visualizar em
salvo em todas as páginas

Date field

Campo de data que recebe uma data digitada em segmentos de dia, mês e ano, na ordem e no formato do idioma. Para datas que a pessoa já sabe, como aniversário ou início de contrato, sem um calendário no caminho.

Feito com React AriaPadrão WAI-ARIA Spinbutton (um por segmento)Componente clienteCódigo ↗
minimal · light · #3fa34d
12112026
granularity
readOnly
invalid
disabled

Instalação

Configure o Camaleo uma vez (Instalação) e importe o que precisar. Os valores são objetos do @internationalized/date, reexportados pelo pacote; coloque o campo num Field para dar um rótulo a ele.

import { DateField, CalendarDate, CalendarDateTime, Field, FieldLabel } from "@camaleo/react";

Anatomia

Uma caixa com um segmento para cada parte da data. Separadores como / também são segmentos, desenhados só para o olho e pulados pelo teclado.

input16112026
[data-slot="date-field"][data-slot="date-input"][data-slot="date-segment"]

Exemplos

Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.

minimal · light · #3fa34d
16112026

Primeiro dia em que o novo valor vale.

18122026

Enviado para a API: 2026-12-18

Controlado

Digite outra data. O onChange entrega um CalendarDate, e o toString() é a data ISO que a sua API espera, sem fuso horário para dar errado.

15102010
Você precisa ter 18 anos ou mais. Confira o ano em que nasceu.

Nascimento com limites

Mude o ano para 2008 ou antes. minValue e maxValue marcam o campo como inválido, e um FieldError diz qual regra falhou.

121120261030

As clínicas abrem das 08:00 às 18:00.

Data e hora

Passe um CalendarDateTime e granularity="minute" quando a hora faz parte da data, como numa consulta. As horas seguem o relógio do idioma.

ddmmaaaa

Aperte a seta para cima: começa em 2020, não em hoje.

Valor de partida

Num campo vazio, as setas começam de hoje. O placeholderValue começa mais perto da resposta, sem preencher nada.

11122026
12112026
12112026

Idiomas

O mesmo 12 de novembro de 2026 em três idiomas: é 11/12 ou 12/11? O locale define a ordem dos segmentos e os separadores, então use o idioma da página.

16102023

Definida pelo RH. Peça a eles para corrigir.

Somente leitura

O readOnly mantém o valor focável e lido pelo leitor de tela. Diga na descrição quem pode mudar.

30102026

Abre de novo quando a declaração de 2026 for revisada.

Desativado

O disabled no Field chega ao rótulo e a todos os segmentos. Diga quando ele volta a abrir.

Em contexto

Campos de data vivem em formulários. São pedaços inteiros de interface para copiar, no estilo que você escolheu.

Crie sua conta

Usamos a data de nascimento para confirmar sua idade.

ddmmaaaa

Você precisa ter 18 anos ou mais para abrir a conta.

Cadastro com data de nascimentoCard · Field · Input · DateField · Button

Passaporte

Necessário para voos internacionais.

17102022
16102032

Válido por pelo menos 6 meses depois da volta.

Documento de viagemCard · Field · Input · DateField · Button

Fatura FAT-2048

Estúdio Claro · R$ 4.850,00

10112026
10122026
Vencimento de faturaCard · DateField · NativeSelect · Button

Boas práticas

21111994

Digite os números ou use as setas.

FaçaUm campo para uma data conhecida.

A pessoa digita o aniversário de memória; os segmentos recebem os números na ordem.

Data de nascimento
EviteTrês selects para dia, mês e ano.

Três listas para abrir e rolar, e nada impede um 31 de fevereiro.

15102010
Você precisa ter 18 anos ou mais. Confira o ano em que nasceu.
FaçaDiga qual regra falhou.

A mensagem diz o que mudar, e o leitor de tela lê ela junto com o campo.

15102010
EviteUma borda vermelha e mais nada.

A pessoa vê que algo está errado, mas não o quê. Cor sozinha não é mensagem de erro.

Props

PropriedadeTipoPadrãoDescrição
classNamestring—Classes adicionadas à raiz.
styleCSSProperties—Estilos inline da raiz.
disabledboolean—Desativa todos os segmentos. Dentro de um Field, vale o disabled do field quando este não é passado.
readOnlybooleanfalseMantém o valor focável e legível, mas não editável.
invalidboolean—Marca o campo como inválido. Dentro de um Field, vale o invalid do field quando este não é passado.
requiredbooleanfalseMarca o campo como obrigatório para as tecnologias assistivas.
localestring—Idioma BCP 47 para a ordem dos segmentos, os separadores e o relógio, como "pt-BR" ou "en-US". Sem ele, vale o I18nProvider mais próximo ou o idioma do navegador.
valueDateValue | null—A data atual (controlada).
defaultValueDateValue | null—A data inicial (não controlada).
onChange(value: DateValue | null) => void—Roda a cada mudança de valor. Recebe null quando um segmento é apagado.
namestring—Nome do input escondido enviado com o formulário, em formato ISO.
autoFocusboolean—Foca o primeiro segmento ao montar.
minValueDateValue—A menor data aceita. Antes dela, o campo fica inválido.
maxValueDateValue—A maior data aceita. Depois dela, o campo fica inválido.
isDateUnavailable(date: DateValue) => boolean—Marca datas que não podem ser escolhidas; o campo fica inválido nelas.
placeholderValueDateValue—A data de onde as setas partem num campo vazio. Também define o tipo do valor, como CalendarDateTime. Padrão: hoje à meia-noite.
hourCycle12 | 24—Força o relógio de 12 ou 24 horas. Padrão: o do idioma.
granularity"day" | "hour" | "minute" | "second"—A menor unidade mostrada. Padrão: "day" para datas e "minute" para datas com hora.
hideTimeZonebooleanfalseEsconde o segmento de fuso horário de um ZonedDateTime.
shouldForceLeadingZerosboolean—Mostra zero à esquerda em dia, mês e hora, mesmo que o idioma não use.

O validationBehavior tem padrão "aria": um valor fora dos limites marca o campo como inválido, mas nunca bloqueia o formulário. As outras props do React Aria passam direto, como onFocusChange, onKeyDown e form.

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

data-slot"date-field" · "date-input" · "date-segment"
data-invalidna raiz e nos segmentos quando inválido
data-disabled · data-readonlyna raiz e nos segmentos quando desativado · somente leitura
data-placeholdernum segmento ainda sem valor
data-typea parte do segmento: day · month · year · hour · minute · literal…
data-focusedno segmento com foco

Tokens que ele lê

Cor

--cml-accent--cml-accent-fg--cml-border-control--cml-danger--cml-fg--cml-fg-muted--cml-field-bg--cml-field-border-sides--cml-field-shadow--cml-focus-ring

Forma e tamanho

--cml-field-border-width--cml-field-height--cml-field-padding--cml-font-size-field--cml-radius-control--cml-radius-field

Tipografia e movimento

--cml-duration-fast--cml-ease-standard--cml-font-field

Só deste componente

--cml-corner-shape--cml-disabled-opacity--cml-segment-focus-bg--cml-segment-focus-border--cml-segment-focus-fg--cml-segment-focus-shadow--cml-segment-radius
/* segmentos retos e sublinhados, só neste formulário */
.passport-form [data-slot="date-field"] {
  --cml-segment-radius: 0;
  --cml-segment-focus-bg: transparent;
  --cml-segment-focus-fg: var(--cml-accent-text);
  --cml-segment-focus-shadow: inset 0 -2px 0 var(--cml-accent);
}

Acessibilidade

0–9Digita no segmento focado e passa para o próximo quando ele enche.
Seta para cima · Seta para baixoSoma ou subtrai um, voltando ao início no fim do segmento.
Seta para a esquerda · Seta para a direitaPassa de um segmento para outro.
Page Up · Page DownAnda um passo maior, como 5 anos.
BackspaceApaga o segmento focado.
TabVai para o próximo segmento e depois sai do campo.

Relacionados

Date pickerO mesmo campo com um calendário em popover.Time fieldHoras e minutos, com fusos horários.FieldRótulo, descrição e erro de um controle.
Esta página foi útil? · Editar esta página no GitHub