HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Date InputView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA date, typed or picked from a calendar.ExperimentalSince 0.1.0FormsUsageimport'@fusion.dev/helix/date-input'import'@fusion.dev/helix-headless/date-input'Preview
API ReferenceRoothelix-date-inputA date, typed or picked from a calendar.
PropTypeDefaultDescriptionautocompletestring""What the browser may autofill here, as one of the platform's own tokens.dateStyle"full"|"iso"|"long"|"medium"|"short""long"How a date is written in the field: `short` through `full`, or ISO.defaultOpenbooleanfalseInitial open state for uncontrolled use, where nothing declared one.defaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.disableDatesstring""Dates that cannot be chosen, as a comma-separated `YYYY-MM-DD` list.disableDaysstring""Days of the week that cannot be chosen, `0` for Sunday through `6`.feedbackstring""What is wrong, in the reader's words rather than the browser's.firstDayOfWeeknumber0First column of the week in the calendar, `0` for Sunday through `6`.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.localestring""Language tag the calendar names its months and days in.maxstring""Latest date that can be chosen, as `YYYY-MM-DD`.maxTagsnumber0How many dates are shown as tags before the rest are counted, in `multiple`.minstring""Earliest date that can be chosen, as `YYYY-MM-DD`.mode"range"|"multiple"How many dates can be held at once.monthsnumber1How many months the calendar shows, side by side.namestring""Name submitted with the form.openbooleanWhether the element is open.placeholderstring"YYYY-MM-DD"What the field says before a date is in it.readOnlybooleanfalseWhether the control refuses changes while still submitting its value.requiredbooleanfalseWhether the form refuses to submit without it.stepnumber1How far apart the selectable dates are, in days.triggerLabelstring"Choose a date"Accessible name for the control that opens the calendar.valuestringWhat the control holds now, and what its form submits.valueAsDateDate|nullThe value as a `Date`, at midnight UTC, or `null` while there is no date.valueAsNumbernumberThe value as milliseconds since the epoch, or `NaN` while there is no date.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionfeedbackWhat is wrong with it.hintHelp under the field.triggerThe mark on the field saying a calendar opens.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired before the date changes. Cancelable: refusing it takes the decision and nothing moves.helix-before-closeHelixBeforeCloseEventFired before it closes. Cancelable: refusing it takes the decision and nothing moves.helix-before-openHelixBeforeOpenEventFired before the calendar opens. Cancelable: refusing it takes the decision and nothing moves.inputEventAnnounced once the value has moved.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionfocus(options: FocusOptions) => voidPuts the caret in the field, the way a label pointing at one would.requestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.requestValue(next: string) => booleanRequests a new value, and reports whether the request stood.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptioncontrolThe text input.dateOne held date, as a tag, in `multiple`.date-dismissThe remove button, when `dismissible`.date-dismiss-markThe glyph on the dismiss control, where none is slotted.date-prefixThe category before the label.feedbackWhat is wrong with it.fieldThe box holding the text and the trigger.hintHelp under the field, while nothing is wrong.labelThe question, over the field.pickerThe date picker inside it.picker-cellOne column of a row, which is what a range paints.picker-dayThe shape inside a cell, which is what a single date paints.picker-gridThe grid of days.picker-headerThe month name and its controls.picker-headingThe month and year being shown.picker-monthOne month, its header and its grid.picker-monthsThe run of months.picker-nextThe control that moves to the next month.picker-next-markThe glyph on the next month control.picker-previousThe control that moves to the previous month.picker-previous-markThe glyph on the previous month control.picker-weekOne row of days.picker-weekdayA column header naming a day of the week.restHow many dates are held beyond the ones shown.surfaceThe floating panel.triggerThe control that opens the calendar.trigger-iconThe mark on the button that opens the calendar.
CSS PropertyDescription--date-input-background-colorFill behind the field.--date-input-border-colorColor of the panel's edge.--date-input-border-widthWidth of the panel's edge. Follows `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a theme says otherwise.--date-input-shadowLift under the panel. Follows `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default.
Roothelix-headless-date-inputA date, typed or picked from a calendar.
PropTypeDefaultDescriptionautocompletestring""What the browser may autofill here, as one of the platform's own tokens.dateStyle"full"|"iso"|"long"|"medium"|"short""long"How a date is written in the field: `short` through `full`, or ISO.defaultOpenbooleanfalseInitial open state for uncontrolled use, where nothing declared one.defaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.disableDatesstring""Dates that cannot be chosen, as a comma-separated `YYYY-MM-DD` list.disableDaysstring""Days of the week that cannot be chosen, `0` for Sunday through `6`.feedbackstring""What is wrong, in the reader's words rather than the browser's.firstDayOfWeeknumber0First column of the week in the calendar, `0` for Sunday through `6`.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.localestring""Language tag the calendar names its months and days in.maxstring""Latest date that can be chosen, as `YYYY-MM-DD`.maxTagsnumber0How many dates are shown as tags before the rest are counted, in `multiple`.minstring""Earliest date that can be chosen, as `YYYY-MM-DD`.mode"range"|"multiple"How many dates can be held at once.monthsnumber1How many months the calendar shows, side by side.namestring""Name submitted with the form.openbooleanWhether the element is open.placeholderstring"YYYY-MM-DD"What the field says before a date is in it.readOnlybooleanfalseWhether the control refuses changes while still submitting its value.requiredbooleanfalseWhether the form refuses to submit without it.stepnumber1How far apart the selectable dates are, in days.triggerLabelstring"Choose a date"Accessible name for the control that opens the calendar.valuestringWhat the control holds now, and what its form submits.valueAsDateDate|nullThe value as a `Date`, at midnight UTC, or `null` while there is no date.valueAsNumbernumberThe value as milliseconds since the epoch, or `NaN` while there is no date.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionfeedbackWhat is wrong with it.hintHelp under the field.triggerThe mark on the field saying a calendar opens.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired before the date changes. Cancelable: refusing it takes the decision and nothing moves.helix-before-closeHelixBeforeCloseEventFired before it closes. Cancelable: refusing it takes the decision and nothing moves.helix-before-openHelixBeforeOpenEventFired before the calendar opens. Cancelable: refusing it takes the decision and nothing moves.inputEventAnnounced once the value has moved.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionfocus(options: FocusOptions) => voidPuts the caret in the field, the way a label pointing at one would.requestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.requestValue(next: string) => booleanRefuses every change while read-only. See `readOnly`.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptioncontrolThe text input.dateOne held date, as a tag, in `multiple`.date-dismissThe remove button, when `dismissible`.date-dismiss-markThe glyph on the dismiss control, where none is slotted.date-prefixThe category before the label.feedbackWhat is wrong with it.fieldThe box holding the text and the trigger.hintHelp under the field, while nothing is wrong.labelThe question, over the field.pickerThe date picker inside it.picker-cellOne column of a row, which is what a range paints.picker-dayThe shape inside a cell, which is what a single date paints.picker-gridThe grid of days.picker-headerThe month name and its controls.picker-headingThe month and year being shown.picker-monthOne month, its header and its grid.picker-monthsThe run of months.picker-nextThe control that moves to the next month.picker-next-markThe glyph on the next month control.picker-previousThe control that moves to the previous month.picker-previous-markThe glyph on the previous month control.picker-weekOne row of days.picker-weekdayA column header naming a day of the week.restHow many dates are held beyond the ones shown.surfaceThe floating panel.triggerThe control that opens the calendar.trigger-iconThe mark on the button that opens the calendar.
ExamplesNameDescriptionBoundedA date within a window, with weekends refused.DisabledDisabled with a date in it.EventsA typed date and one taken from the calendar arrive the same way.FormattedThe same date written long, medium and short.InvalidA date before the earliest allowed, and what the field says about it.MonthsTwo months side by side, which suits picking across a boundary.MultipleSeveral dates in one field, each as a tag.PreviewA field that takes a typed date or one from the calendar it opens.PreviewA field that takes a typed date or one from the calendar it opens.RangeA start and an end, chosen as one gesture.RestrictedDates a reader may not choose, and a week that starts on Monday.