Date field
Types a date into day, month and year segments in the order and format of the locale. For dates people already know, like a birthday or a contract start, with no calendar in the way.
Installation
Set up Camaleo once (Installation), then import what you need. Values are @internationalized/date objects, re-exported from the package; put the field in a Field to give it a label.
import { DateField, CalendarDate, CalendarDateTime, Field, FieldLabel } from "@camaleo/react";Anatomy
A box with one segment per part of the date. Literals like / are segments too, drawn for the eye and skipped by the keyboard.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
The first day the new rate applies.
Sent to the API: 2026-12-18
Controlled
Type a new date. onChange gives you a CalendarDate, and toString() is the ISO date your API expects, with no time zone to go wrong.
Birth date with limits
Change the year to 2008 or earlier. minValue and maxValue mark the field invalid, and a FieldError says which rule failed.
Clinics open from 8:00 AM to 6:00 PM.
Date and time
Pass a CalendarDateTime and granularity="minute" when the time belongs to the date, like an appointment. Hours follow the locale's clock.
Press Arrow Up: it starts from 2020, not from today.
Placeholder value
An empty field starts from today when people press the arrows. placeholderValue starts it closer to the answer, without filling anything in.
Locales
The same 12 November 2026 in three locales: is it 11/12 or 12/11? locale sets the segment order and separators, so match it to the page's language.
Set by HR. Ask them to correct it.
Read-only
readOnly keeps the value focusable and readable by screen readers. Say in the description who can change it.
Opens again once the 2026 return is reviewed.
Disabled
disabled on the Field reaches the label and every segment. Tell people when it opens again.
In context
Date fields come in forms. These are whole pieces of UI you can copy, in the skin you picked.
Passport
Needed for international flights.
Valid for at least 6 months after your return.
Invoice INV-2048
Bright Studio · $4,850.00
Guidelines
Type the numbers or use the arrow keys.
People type a birthday from memory; the segments take the digits in order.
Three lists to open and scroll, and nothing stops 31 February.
The message tells people what to change, and a screen reader reads it with the field.
People see something is wrong, not what. Color alone is not an error message.
Props
Field, the field's disabled is used when this is not set.Field, the field's invalid is used when this is not set."en-US" or "pt-BR". Defaults to the nearest I18nProvider or the browser's language."day"
for dates, and "minute" for times.validationBehavior defaults to "aria": an out-of-range value marks the field invalid but never blocks the form. React Aria's other props pass through, such as onFocusChange, onKeyDown and form.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the field itself.
Attributes
Tokens it reads
Color
Shape & size
Type & motion
This component only
/* square, outlined segments, only in this form */
.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);
}Accessibility
- Each segment is a spinbutton named by its part (day, month, year) and the field's label, so people know which number they are changing.
- The whole value is read as text, such as "November 16, 2026", not as separate numbers.
- FieldDescription and FieldError are linked with aria-describedby, and an invalid field sets aria-invalid.
- Always pass locale: the server and the browser then format the same way, and segment names come in the page's language.