DateField

A date field allows users to type a date value using individually editable segments for month, day, and year. Each segment can be incremented or decremented with arrow keys, making it efficient for keyboard-driven date entry.

Import

import { DateField } from '@proyecto-viviana/solid-spectrum';
import { CalendarDateClass as CalendarDate } from '@proyecto-viviana/solid-stately';

Basic Usage

A simple date field with a label. Click on a segment and use arrow keys or type numbers to set the date.

Birth date

mmddyyyy

Entered date: None

const [date, setDate] = createSignal<DateValue | null>(null);

<DateField
  label="Birth date"
  value={date()}
  onChange={setDate}
/>

<p>Selected: {date()?.toString() ?? "None"}</p>

With Placeholder Value

A placeholder date controls the initial segments shown when the field is empty. This helps guide users toward a reasonable date. The placeholder is displayed in a muted style.

Event date

mmddyyyy

Enter the date of your event

<DateField
  label="Event date"
  placeholderValue={new CalendarDate(2026, 6, 15)}
  description="Enter the date of your event"
/>

Disabled State

A disabled date field cannot be interacted with. All segments are visually muted and not focusable.

Locked date

2172026

<DateField
  label="Locked date"
  isDisabled
  value={new CalendarDate(2026, 2, 17)}
/>

Required with Validation

Mark the field as required and display an error message for invalid states.

Start date

mmddyyyy

A start date is required

<DateField
  label="Start date"
  isRequired
  isInvalid
  errorMessage="A start date is required"
/>

Props

Prop	Type	Default	Description
`label`	string	—	Label text displayed above the date input
`value`	DateValue \| null	—	The currently entered date (controlled)
`onChange`	(date: DateValue \| null) => void	—	Handler called when the date value changes
`isDisabled`	boolean	`false`	Whether the date field is disabled
`isRequired`	boolean	`false`	Whether a date value is required
`placeholderValue`	DateValue	—	A placeholder date that sets the initial segments displayed when empty
`isInvalid`	boolean	`false`	Whether the date field is in an invalid state
`errorMessage`	string	—	Error message displayed below the input when invalid
`description`	string	—	Help text displayed below the input
`minValue`	DateValue	—	The minimum allowed date
`maxValue`	DateValue	—	The maximum allowed date
`size`	'sm' \| 'md' \| 'lg'	`'md'`	The visual size of the date field

Accessibility

Each date segment uses a spinbutton role with proper aria-valuemin, aria-valuemax, and aria-valuenow
Arrow Up/Down increments or decrements the focused segment
Tab moves focus between segments (month, day, year)
Typing digits automatically advances to the next segment when complete
Label is associated via aria-labelledby for screen reader announcement
Error messages are linked through aria-describedby
Required state is communicated through aria-required