DateField

A segmented date input field. Each part of the date (month, day, year) is an individually editable segment.

Example

Date

04032026

Value: 2026-04-03

Root Props

Prop	Type	Default	Description
`value`	`DateValue`	—	Current date value, bindable
`onValueChange`	`(value) => void`	—	Called when value changes
`placeholder`	`DateValue`	—	Placeholder date, bindable
`minValue`	`DateValue`	—	Minimum allowed date
`maxValue`	`DateValue`	—	Maximum allowed date
`disabled`	`boolean`	`false`	Disable the field
`readonly`	`boolean`	`false`	Make the field read-only
`locale`	`string`	`'en'`	Locale for segment formatting
`granularity`	`'day' \| 'month' \| 'year' \| 'hour' \| 'minute' \| 'second'`	—	Finest unit to display
`hourCycle`	`12 \| 24`	—	12 or 24-hour time format
`hideTimeZone`	`boolean`	`false`	Hide time zone segment
`required`	`boolean`	`false`	Mark as required for forms

Sub-components

Component	Key Props	Description
`DateField.Label`	`class`	Label associated with the field
`DateField.Input`	`name`, `class`	Container that auto-renders date segments
`DateField.Segment`	`part`, `class`	Individual editable date segment (used internally by Input)

Usage

<script>
  import { DateField } from '@chrissnell/chonky-ui';
  import { CalendarDate } from '@internationalized/date';

  let value = $state(new CalendarDate(2026, 4, 3));
</script>

<DateField.Root bind:value>
  <DateField.Label>Date</DateField.Label>
  <DateField.Input />
</DateField.Root>