sheengemologic ui
All components

DateField

A locale-ordered segmented date editor with an ISO form projection.@gemologic/sheen-date · date and time

Playground

This example has no scalar controls. Its validated source remains interactive below.
Invoice date
982026
<DateField label="Invoice date" name="invoiceDate" defaultValue={createCalendarDate(2026, 9, 8)} />

Variant matrix

Invoice date
Invoice date
982026

Anatomy

Package
@gemologic/sheen-date
Source
packages/date/src/DateField.tsx
Tokens
  • --sheen-color-border-control
  • --sheen-color-bg-inset
  • --sheen-color-focus-ring

Accessibility

Role: group of spinbuttonsKeyboard: ArrowLeft, ArrowRight, ArrowUp, ArrowDown, PageUp, PageDown, Home, End, numeric keys

Do

  • Submit the documented ISO projection instead of reading rendered segments.

Do not

  • Do not pass JavaScript Date objects.

Generated props

NameTypeDefaultDescription
label *string—Required visible field label.
valueCalendarDate | null—App-owned Sheen CalendarDate, or null.
defaultValueCalendarDate | null—Initial uncontrolled value.
onValueChange(value: CalendarDate | null) => void—Receives complete valid dates and explicit clearing.
placeholderValueCalendarDate—Deterministic values shown behind empty segments.
minValueCalendarDate—Minimum valid date.
maxValueCalendarDate—Maximum valid date.
isDateUnavailable(value: CalendarDate) => boolean—Marks committed dates invalid using Sheen values.
localestring—Explicit BCP 47 locale, defaulting to theme context.
calendarstring—Optional presentation calendar identifier.
namestring—Native form field name for YYYY-MM-DD.
formstring—Optional external form owner.
descriptionstring—Associated supporting text.
errorstring—Associated app validation error.
requiredbooleanfalseMarks the segmented editor required.
disabledbooleanfalseDisables editing and form projection.
readOnlybooleanfalseRetains focus while rejecting edits.
Native Solid/HTML attributes remain available and are omitted from this authored-prop view.