Date Field

Date typed segment by segment in the locale order. Free, MIT · Forms and input › Date and time

A date typed in place, segment by segment, in the locale's own order: "дд.мм.гггг", "mm/dd/yyyy", "yyyy/mm/dd" (React Aria's DateField). Digits fill a segment and move on; ArrowUp / ArrowDown step it; Backspace clears it. Each segment is a spinbutton, so a screen reader reads and changes it like a number, and a phone shows its number keyboard. Pair it with a Calendar for picking, or use DatePicker for a field that opens one.

Installation

npx valyro-cli@latest add date-field

npx shadcn@latest add https://valyro.xyz/r/date-field.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { DateField } from 'valyro-ui';

Props

Prop	Type	Default
`value`	`Date \| null`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`Date \| null`	`null`	Initial `value` when uncontrolled.
`onValueChange`	`(value: Date \| null) => void`		Called with the date once every segment is filled, and with null when one is cleared.
`locale`	`string`		Order of day, month and year, the separators and the digits. Defaults to the `ThemeProvider` locale, then the browser's.
`minDate`	`Date`		Earliest valid day (time of day ignored): an earlier date marks the field invalid.
`maxDate`	`Date`		Latest valid day (time of day ignored): a later date marks the field invalid.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Field height and text size.
`disabled`	`boolean`	`false`	Takes the segments out of the Tab order and leaves the date out of form data.
`readOnly`	`boolean`	`false`	Focusable and readable, not editable.
`invalid`	`boolean`	`false`	Danger border and aria-invalid. Also shown after a submit attempt while a required date is missing.
`name`	`string`		Submits the date with the surrounding form as `YYYY-MM-DD` (empty when incomplete).
`required`	`boolean`		Blocks native form submission while the date is incomplete; aria-required on the segments.
`icon`	`ReactNode`	`<CalendarIcon />`	Icon before the segments; `null` for none. Default: a calendar.
`labels`	`Partial<DateFieldLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Date Picker — Date selection
Date Range Picker — Date range selection
Time Picker — Time selection
Time Field — Time typed segment by segment, 24-hour or AM/PM
Wheel Picker — iOS-style picker wheel: momentum, 3D cylinder, date and time presets
Date Of Birth Input — Date of birth as three selects in locale order
Text Input — Text fields
Textarea — Multiline text input
Search Input — Search field
Mentions Input — Text with @mentions and #tags, async suggestions
Tags Input — Tag entry
Select — Pick one option from a list

Previous: Date Range Picker · Next: Time Picker · All Forms and input