HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet 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.StableSince 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.
PropTypeDescriptionautocompletestringDefault""What the browser may autofill here, as one of the platform's own tokens,
such as bday.badInputMessagestringThe message shown when the field holds text the picker cannot read as a
date, a time, or a color.calendar"buddhist"|"gregory"|"iso8601"|"japanese"|"roc"|"chinese"|"coptic"|"dangi"|"ethioaa"|"ethiopic"|"hebrew"|"indian"|"islamic"|"islamic-civil"|"islamic-rgsa"|"islamic-tbla"|"islamic-umalqura"|"persian"The calendar the written date, the segments, and the calendar's days are
in: gregory, buddhist, japanese, roc, or iso8601, or a calendar
with months of its own that Date Picker's calendar names, such as
persian, hebrew, islamic-umalqura, ethiopic, or chinese.calendarLabelstringDefault"Date Picker"The name of the calendar's grid of days, read by screen readers.clearablebooleanDefaultfalseWhether the field shows a button that empties it, as Input's clearable
does. Shown only while the field holds something to clear and is neither
disabled nor read-only.clearLabelstringDefault"Clear"The accessible name of the clear button, which shows only an icon.collapseLabelstringDefault"Show fewer"The button's label, read by screen readers, once every token is showing.dateStyle"full"|"iso"|"long"|"medium"|"short"Default"long"How a date is written in the field: short through full, or ISO.dayContent((date: string) => unknown)What each day in the calendar shows, in place of its number: a function
given the date as YYYY-MM-DD. Handed to the calendar; see Date Picker's
dayContent.defaultOpenbooleanDefaultfalseWhether the element starts open. Ignored once open is written.defaultValuestringDefault""The value the control starts with. A form reset returns it to this value,
and to the value attribute where this one is not written, as a native
control resets to the value it declares.disabledbooleanDefaultfalseWhether the control is disabled and cannot be used.disableDatesstringDefault""Dates that cannot be chosen, as YYYY-MM-DD, separated by commas or
spaces.disableDaysstringDefault""Days of the week that cannot be chosen, from 0 for Sunday to 6 for
Saturday, separated by commas or spaces.emptyMessagestringDefault"{kind, select, date {Enter a date.} other {Enter a time.}}"What a row of segments reports when the field is required and every
segment is empty, where value-missing-message is not set. {kind} is
date or time.emptySegmentLabelstringDefault"Empty"What a screen reader hears for a segment with nothing in it, which a
sighted reader sees as dashes.expandablebooleanDefaultfalseWhether the count is a button that shows the hidden tokens.expandLabelstringDefault"Show all"The count button's label, read by screen readers. Its visible text, such
as +3, does not say what it does.feedbackstringDefault""The validation message shown under the control. It replaces the
browser's message.firstDayOfWeeknumberThe day in the calendar's first column, from 0 for Sunday to 6 for
Saturday.hintstringDefault""Help text shown under the control. A validation message replaces it.incompleteMessagestringDefault"{kind, select, date {Enter a whole date.} other {Enter a whole time.}}"What a row of segments reports while some segments are set and others
are not, where bad-input-message is not set. {kind} is date or
time.isDateUnavailable((date: string) => boolean)A rule for which dates cannot be chosen: a function given the date as
YYYY-MM-DD that returns true to bar it. The calendar offers such a date
as unavailable, and a typed one is invalid, as with disable-dates.labelstringDefault""The field's label, which is also its accessible name. Content in the
label slot replaces it.localestringDefault""The language tag for the field's order and words, and for the names of
months and days in the calendar.maxstringDefault""The latest date that can be chosen, as YYYY-MM-DD.maxTagsnumberDefault0How many tokens to show before the rest become a count.maxView"month"|"year"How far the calendar's heading steps back from the days: month or
year. Handed to the calendar; see Date Picker's max-view.minstringDefault""The earliest date that can be chosen, as YYYY-MM-DD.mode"range"|"multiple"How many dates can be held at once.monthsnumberDefault1How many months the calendar shows, side by side.monthViewLabelstringDefault"{heading}. Choose a month"The name of the calendar's heading where it shows the months, with
{heading} filled in.namestringDefault""The name the control's value is submitted under.nextLabelstringDefault"Next month"The name of the calendar's control that moves to the next month.nextYearLabelstringDefault"Next year"The name of the calendar's control that moves forward a year.nextYearsLabelstringDefault"Later years"The name of the calendar's control that moves forward a page of years.openbooleanWhether the element is open.placeholderstringDefault"YYYY-MM-DD"The text the field shows before a date is entered.previousLabelstringDefault"Previous month"The name of the calendar's control that moves to the previous month.previousYearLabelstringDefault"Previous year"The name of the calendar's control that moves back a year.previousYearsLabelstringDefault"Earlier years"The name of the calendar's control that moves back a page of years.rangeEndLabelstringDefault"End"What a screen reader hears before the segments of a range's second date
or time, after each segment's own name.rangeLengthMessagestringDefault"A range is two dates."The message shown when a range holds more than two dates.rangeOrderMessagestringDefault"Choose an end on or after {start}."The message shown when a range ends before it starts. {start} is
replaced with the start, written the way the field writes dates.rangeOverflowMessagestringDefault"Choose a date on or before {max}."The message shown when a date is after max. {max} is replaced with
max, written the way the field writes dates.rangeStartLabelstringDefault"Start"What a screen reader hears before the segments of a range's first date
or time, after each segment's own name: "month, Start, Stay".rangeUnderflowMessagestringDefault"Choose a date on or after {min}."The message shown when a date is before min. {min} is replaced with
min, written the way the field writes dates.readOnlybooleanDefaultfalseWhether the value is locked. A read-only control still submits its value.removeLabelstringDefault"Remove {name}"The name of the button that removes one date. {name} is replaced with
the date.requiredbooleanDefaultfalseWhether the field needs a value before the form can submit.restTextstringDefault"+{count}"The count of the tokens past max-tags, as it is shown, with {count}
for the number, written in the element's locale.segmentedbooleanDefaultfalseWhether the field is a row of segments, one for each part of the date or
time, in place of a line of text.selectionLabelstringDefault"{kind, select, date {Selected date: {start}} start {Range starts {start}. Choose the day it ends.} range {Selected range: {start} to {end}} other {{count, plural, one {# date selected} other {# dates selected}}}}"What a screen reader hears about the dates chosen in the calendar, with
{kind}, {start}, {end} and {count} filled in as Date Picker's
selection-label says.stepnumberDefault1How far apart the selectable dates are, in days.stepMismatchMessagestringDefault"Choose one of the dates the calendar offers."The message shown when a date is not on step.timeZonestringDefault""The time zone today is read in, such as America/New_York, handed to the
calendar: the day marked today, and the month an empty field opens on.
Empty is the reader's own. Dates are plain YYYY-MM-DD and carry no zone.triggerLabelstringDefault"Choose a date"The name of the button that opens the calendar, read by screen readers.unavailableMessagestringDefault"Choose a date that is available."The message shown when disable-dates or disable-days bars a date.unreadableMessagestringDefault"{mode, select, single {Enter a date such as {example}.} other {Enter dates such as {example}, separated by commas.}}"The message for text that is no date, where bad-input-message is not
set. {mode} is single, range, or multiple, and {example} is a
date written as the field writes one, August 24, 2026 in en-US and
24. August 2026 in de-DE at the default date-style.valuestringThe control's current value, which 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.valueMissingMessagestringThe message shown when the field is required and empty.yearViewLabelstringDefault"{heading}. Choose a year"The name of the calendar's heading where it shows a page of years, with
{heading} filled in.
ReadTypeDescriptionformHTMLFormElement|nullThe form the control belongs to, or null.labelsNodeListThe labels associated with the control.validationMessagestringThe message the browser would show for the control, or an empty string.validityValidityStateWhether the control meets its constraints, and why not.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.willValidatebooleanWhether the control is checked when its form is submitted.
SlotDescriptionclear-iconReplaces the cross on the clear button, under clearable.endContent after the date, before the trigger, such as a clear button.feedbackThe error message under the field.hintThe help text under the field.labelThe label, for content richer than the label text.next-iconThe icon on the calendar's next month control.panel-footerContent in the panel under the calendar, such as a note or an action.panel-headerContent in the panel above the calendar, such as a heading or a shortcut.previous-iconThe icon on the calendar's previous month control.startContent before the date, such as an icon.triggerThe icon on the button that opens the calendar.
EventTypeDescriptionchangeEventFired after the value changes.helix-before-changeHelixBeforeChangeEventFired before the date changes. Cancelable: call preventDefault() to keep the current date.helix-before-closeHelixBeforeCloseEventFired before the calendar closes. Cancelable: call preventDefault() to keep it open.helix-before-openHelixBeforeOpenEventFired before the calendar opens. Cancelable: call preventDefault() to keep it closed.helix-clearHelixClearEventFired after the clear button has emptied the field, after input and change.inputEventFired after the value changes.toggleToggleEventFired when the calendar opens or closes, with newState and oldState.
MethodTypeDescriptioncheckValidity() => booleanReturns whether the control is valid, and fires invalid on it when it is
not. The control shows no message for it: reportValidity() does that.focus(options: FocusOptions) => voidPuts the caret in the field, as clicking its label does.reportValidity() => booleanReturns whether the control is valid, and when it is not, fires invalid
and shows the browser's message at the control.requestOpen(next: boolean) => booleanRequests the panel open or closed. While readOnly is set, it does not
open, and it returns false.requestValue(next: string) => booleanRequests a new value. While readOnly is set, nothing changes and it
returns false.setCustomValidity(message: string) => voidMarks the control invalid with message, or clears that with an empty
string, as on a native control. The form does not submit while it is set.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptionclearThe button that empties the field, under clearable, while it holds a date.controlThe text input.dateOne held date, as a tag, in multiple.date-cellThe tag's grid cell, which a tag draws only inside a tag group.date-dismissThe remove button, when dismissible.date-dismiss-markThe icon on the remove button, shown when no icon is slotted.date-labelThe label, trimmed to its capitals and baseline.date-linkThe tag's link around its label, which a tag draws only with href.date-startThe category before the label.feedbackThe error message under the field.fieldThe box that holds the text and the trigger.hintThe help text under the field, shown while there is no error.labelThe label above the field.literalThe text the locale writes between two segments, such as a slash, in segmented.pickerThe date picker inside the panel.picker-cellOne cell in a row of days. A range colors these cells.picker-cell-range-endThe cell of a range's last day. Applied with picker-cell.picker-cell-range-middleA cell between a range's ends. Applied with picker-cell.picker-cell-range-startThe cell of a range's first day. Applied with picker-cell.picker-dayThe shape inside a cell. A single chosen date colors the shape.picker-day-disabledA day that cannot be chosen. Applied with picker-day.picker-day-outsideA day from a neighboring month. Applied with picker-day.picker-day-selectedThe chosen day, or either end of a chosen range. Applied with picker-day.picker-day-todayToday. Applied with picker-day.picker-day-weekendA day of the weekend where the calendar's language is spoken, beside picker-day.picker-feedbackThe calendar's own message, under it, while the calendar's feedback is set.picker-gridThe grid of days.picker-headerThe month name and its controls.picker-headingThe month and year being shown.picker-heading-buttonThe calendar's heading as a button that shows the months or the years, where max-view is set.picker-monthOne month, with its header and its grid.picker-monthsThe row of months.picker-nextThe control that moves to the next month.picker-next-markThe icon on the next month control.picker-periodOne month or one year, in the calendar's months and years views.picker-period-currentThis month or this year, beside picker-period.picker-period-disabledA month or a year wholly outside min and max, beside picker-period.picker-period-rowOne row of three months or years.picker-period-selectedThe month or the year on show, beside picker-period.picker-periodsThe grid of months or years.picker-previousThe control that moves to the previous month.picker-previous-markThe icon on the previous month control.picker-selectionThe chosen date or range in words, which screen readers hear when it changes. Drawn for screen readers only.picker-weekOne row of days.picker-weekdayA column header naming a day of the week.range-separatorThe dash between a range's two rows of segments, in segmented, beside literal.restThe count of dates beyond the ones shown. It is a <button> with expandable and a <span> without it.segmentOne part of the date, a year, a month or a day, in segmented.segment-placeholderA segment with nothing in it yet. Applied with segment.segmentsThe row of segments that holds the date, in segmented.surfaceThe floating panel.tagsThe row the dates sit in.triggerThe control that opens the calendar.trigger-iconThe icon on the button that opens the calendar.
CSS PropertyDescription--date-input-background-colorThe fill behind the field.--date-input-border-colorThe color of the panel's border.--date-input-border-widthThe width of the panel's border. It follows --helix-border-floating, which is 0, so the panel stands out by its shadow unless a theme sets a border.--date-input-segment-focus-background-colorThe fill behind the segment with focus, in segmented. It follows --helix-color-primary-surface.--date-input-segment-focus-colorThe text of the segment with focus, in segmented.--date-input-segment-literal-colorThe text the locale writes between two segments, in segmented.--date-input-segment-placeholder-colorThe dashes of a segment with nothing in it, in segmented. It matches the text field's placeholder.--date-input-shadowThe shadow under the panel. It follows --helix-shadow-floating. The panel can sit over any content, so it has a shadow by default.
Custom stateDescriptionblankThe field holds no date.invalidThe field has an error to show, from the browser's validation or from your feedback.openThe calendar is open.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-date-inputA date, typed or picked from a calendar.
PropTypeDescriptionautocompletestringDefault""What the browser may autofill here, as one of the platform's own tokens,
such as bday.badInputMessagestringThe message shown when the field holds text the picker cannot read as a
date, a time, or a color.calendar"buddhist"|"gregory"|"iso8601"|"japanese"|"roc"|"chinese"|"coptic"|"dangi"|"ethioaa"|"ethiopic"|"hebrew"|"indian"|"islamic"|"islamic-civil"|"islamic-rgsa"|"islamic-tbla"|"islamic-umalqura"|"persian"The calendar the written date, the segments, and the calendar's days are
in: gregory, buddhist, japanese, roc, or iso8601, or a calendar
with months of its own that Date Picker's calendar names, such as
persian, hebrew, islamic-umalqura, ethiopic, or chinese.calendarLabelstringDefault"Date Picker"The name of the calendar's grid of days, read by screen readers.clearablebooleanDefaultfalseWhether the field shows a button that empties it, as Input's clearable
does. Shown only while the field holds something to clear and is neither
disabled nor read-only.clearLabelstringDefault"Clear"The accessible name of the clear button, which shows only an icon.collapseLabelstringDefault"Show fewer"The button's label, read by screen readers, once every token is showing.dateStyle"full"|"iso"|"long"|"medium"|"short"Default"long"How a date is written in the field: short through full, or ISO.dayContent((date: string) => unknown)What each day in the calendar shows, in place of its number: a function
given the date as YYYY-MM-DD. Handed to the calendar; see Date Picker's
dayContent.defaultOpenbooleanDefaultfalseWhether the element starts open. Ignored once open is written.defaultValuestringDefault""The value the control starts with. A form reset returns it to this value,
and to the value attribute where this one is not written, as a native
control resets to the value it declares.disabledbooleanDefaultfalseWhether the control is disabled and cannot be used.disableDatesstringDefault""Dates that cannot be chosen, as YYYY-MM-DD, separated by commas or
spaces.disableDaysstringDefault""Days of the week that cannot be chosen, from 0 for Sunday to 6 for
Saturday, separated by commas or spaces.emptyMessagestringDefault"{kind, select, date {Enter a date.} other {Enter a time.}}"What a row of segments reports when the field is required and every
segment is empty, where value-missing-message is not set. {kind} is
date or time.emptySegmentLabelstringDefault"Empty"What a screen reader hears for a segment with nothing in it, which a
sighted reader sees as dashes.expandablebooleanDefaultfalseWhether the count is a button that shows the hidden tokens.expandLabelstringDefault"Show all"The count button's label, read by screen readers. Its visible text, such
as +3, does not say what it does.feedbackstringDefault""The validation message shown under the control. It replaces the
browser's message.firstDayOfWeeknumberThe day in the calendar's first column, from 0 for Sunday to 6 for
Saturday.hintstringDefault""Help text shown under the control. A validation message replaces it.incompleteMessagestringDefault"{kind, select, date {Enter a whole date.} other {Enter a whole time.}}"What a row of segments reports while some segments are set and others
are not, where bad-input-message is not set. {kind} is date or
time.isDateUnavailable((date: string) => boolean)A rule for which dates cannot be chosen: a function given the date as
YYYY-MM-DD that returns true to bar it. The calendar offers such a date
as unavailable, and a typed one is invalid, as with disable-dates.labelstringDefault""The field's label, which is also its accessible name. Content in the
label slot replaces it.localestringDefault""The language tag for the field's order and words, and for the names of
months and days in the calendar.maxstringDefault""The latest date that can be chosen, as YYYY-MM-DD.maxTagsnumberDefault0How many tokens to show before the rest become a count.maxView"month"|"year"How far the calendar's heading steps back from the days: month or
year. Handed to the calendar; see Date Picker's max-view.minstringDefault""The earliest date that can be chosen, as YYYY-MM-DD.mode"range"|"multiple"How many dates can be held at once.monthsnumberDefault1How many months the calendar shows, side by side.monthViewLabelstringDefault"{heading}. Choose a month"The name of the calendar's heading where it shows the months, with
{heading} filled in.namestringDefault""The name the control's value is submitted under.nextLabelstringDefault"Next month"The name of the calendar's control that moves to the next month.nextYearLabelstringDefault"Next year"The name of the calendar's control that moves forward a year.nextYearsLabelstringDefault"Later years"The name of the calendar's control that moves forward a page of years.openbooleanWhether the element is open.placeholderstringDefault"YYYY-MM-DD"The text the field shows before a date is entered.previousLabelstringDefault"Previous month"The name of the calendar's control that moves to the previous month.previousYearLabelstringDefault"Previous year"The name of the calendar's control that moves back a year.previousYearsLabelstringDefault"Earlier years"The name of the calendar's control that moves back a page of years.rangeEndLabelstringDefault"End"What a screen reader hears before the segments of a range's second date
or time, after each segment's own name.rangeLengthMessagestringDefault"A range is two dates."The message shown when a range holds more than two dates.rangeOrderMessagestringDefault"Choose an end on or after {start}."The message shown when a range ends before it starts. {start} is
replaced with the start, written the way the field writes dates.rangeOverflowMessagestringDefault"Choose a date on or before {max}."The message shown when a date is after max. {max} is replaced with
max, written the way the field writes dates.rangeStartLabelstringDefault"Start"What a screen reader hears before the segments of a range's first date
or time, after each segment's own name: "month, Start, Stay".rangeUnderflowMessagestringDefault"Choose a date on or after {min}."The message shown when a date is before min. {min} is replaced with
min, written the way the field writes dates.readOnlybooleanDefaultfalseWhether the value is locked. A read-only control still submits its value.removeLabelstringDefault"Remove {name}"The name of the button that removes one date. {name} is replaced with
the date.requiredbooleanDefaultfalseWhether the field needs a value before the form can submit.restTextstringDefault"+{count}"The count of the tokens past max-tags, as it is shown, with {count}
for the number, written in the element's locale.segmentedbooleanDefaultfalseWhether the field is a row of segments, one for each part of the date or
time, in place of a line of text.selectionLabelstringDefault"{kind, select, date {Selected date: {start}} start {Range starts {start}. Choose the day it ends.} range {Selected range: {start} to {end}} other {{count, plural, one {# date selected} other {# dates selected}}}}"What a screen reader hears about the dates chosen in the calendar, with
{kind}, {start}, {end} and {count} filled in as Date Picker's
selection-label says.stepnumberDefault1How far apart the selectable dates are, in days.stepMismatchMessagestringDefault"Choose one of the dates the calendar offers."The message shown when a date is not on step.timeZonestringDefault""The time zone today is read in, such as America/New_York, handed to the
calendar: the day marked today, and the month an empty field opens on.
Empty is the reader's own. Dates are plain YYYY-MM-DD and carry no zone.triggerLabelstringDefault"Choose a date"The name of the button that opens the calendar, read by screen readers.unavailableMessagestringDefault"Choose a date that is available."The message shown when disable-dates or disable-days bars a date.unreadableMessagestringDefault"{mode, select, single {Enter a date such as {example}.} other {Enter dates such as {example}, separated by commas.}}"The message for text that is no date, where bad-input-message is not
set. {mode} is single, range, or multiple, and {example} is a
date written as the field writes one, August 24, 2026 in en-US and
24. August 2026 in de-DE at the default date-style.valuestringThe control's current value, which 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.valueMissingMessagestringThe message shown when the field is required and empty.yearViewLabelstringDefault"{heading}. Choose a year"The name of the calendar's heading where it shows a page of years, with
{heading} filled in.
ReadTypeDescriptionformHTMLFormElement|nullThe form the control belongs to, or null.labelsNodeListThe labels associated with the control.validationMessagestringThe message the browser would show for the control, or an empty string.validityValidityStateWhether the control meets its constraints, and why not.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.willValidatebooleanWhether the control is checked when its form is submitted.
SlotDescriptionclear-iconReplaces the cross on the clear button, under clearable.endContent after the date, before the trigger, such as a clear button.feedbackThe error message under the field.hintThe help text under the field.labelThe label, for content richer than the label text.next-iconThe icon on the calendar's next month control.panel-footerContent in the panel under the calendar, such as a note or an action.panel-headerContent in the panel above the calendar, such as a heading or a shortcut.previous-iconThe icon on the calendar's previous month control.startContent before the date, such as an icon.triggerThe icon on the button that opens the calendar.
EventTypeDescriptionchangeEventFired after the value changes.helix-before-changeHelixBeforeChangeEventFired before the date changes. Cancelable: call preventDefault() to keep the current date.helix-before-closeHelixBeforeCloseEventFired before the calendar closes. Cancelable: call preventDefault() to keep it open.helix-before-openHelixBeforeOpenEventFired before the calendar opens. Cancelable: call preventDefault() to keep it closed.helix-clearHelixClearEventFired after the clear button has emptied the field, after input and change.inputEventFired after the value changes.toggleToggleEventFired when the calendar opens or closes, with newState and oldState.
MethodTypeDescriptioncheckValidity() => booleanReturns whether the control is valid, and fires invalid on it when it is
not. The control shows no message for it: reportValidity() does that.focus(options: FocusOptions) => voidPuts the caret in the field, as clicking its label does.reportValidity() => booleanReturns whether the control is valid, and when it is not, fires invalid
and shows the browser's message at the control.requestOpen(next: boolean) => booleanRequests the panel open or closed. While readOnly is set, it does not
open, and it returns false.requestValue(next: string) => booleanRequests a new value. While readOnly is set, nothing changes and it
returns false.setCustomValidity(message: string) => voidMarks the control invalid with message, or clears that with an empty
string, as on a native control. The form does not submit while it is set.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptionclearThe button that empties the field, under clearable, while it holds a date.controlThe text input.dateOne held date, as a tag, in multiple.date-cellThe tag's grid cell, which a tag draws only inside a tag group.date-dismissThe remove button, when dismissible.date-dismiss-markThe icon on the remove button, shown when no icon is slotted.date-labelThe label, trimmed to its capitals and baseline.date-linkThe tag's link around its label, which a tag draws only with href.date-startThe category before the label.feedbackThe error message under the field.fieldThe box that holds the text and the trigger.hintThe help text under the field, shown while there is no error.labelThe label above the field.literalThe text the locale writes between two segments, such as a slash, in segmented.pickerThe date picker inside the panel.picker-cellOne cell in a row of days. A range colors these cells.picker-cell-range-endThe cell of a range's last day. Applied with picker-cell.picker-cell-range-middleA cell between a range's ends. Applied with picker-cell.picker-cell-range-startThe cell of a range's first day. Applied with picker-cell.picker-dayThe shape inside a cell. A single chosen date colors the shape.picker-day-disabledA day that cannot be chosen. Applied with picker-day.picker-day-outsideA day from a neighboring month. Applied with picker-day.picker-day-selectedThe chosen day, or either end of a chosen range. Applied with picker-day.picker-day-todayToday. Applied with picker-day.picker-day-weekendA day of the weekend where the calendar's language is spoken, beside picker-day.picker-feedbackThe calendar's own message, under it, while the calendar's feedback is set.picker-gridThe grid of days.picker-headerThe month name and its controls.picker-headingThe month and year being shown.picker-heading-buttonThe calendar's heading as a button that shows the months or the years, where max-view is set.picker-monthOne month, with its header and its grid.picker-monthsThe row of months.picker-nextThe control that moves to the next month.picker-next-markThe icon on the next month control.picker-periodOne month or one year, in the calendar's months and years views.picker-period-currentThis month or this year, beside picker-period.picker-period-disabledA month or a year wholly outside min and max, beside picker-period.picker-period-rowOne row of three months or years.picker-period-selectedThe month or the year on show, beside picker-period.picker-periodsThe grid of months or years.picker-previousThe control that moves to the previous month.picker-previous-markThe icon on the previous month control.picker-selectionThe chosen date or range in words, which screen readers hear when it changes. Drawn for screen readers only.picker-weekOne row of days.picker-weekdayA column header naming a day of the week.range-separatorThe dash between a range's two rows of segments, in segmented, beside literal.restThe count of dates beyond the ones shown. It is a <button> with expandable and a <span> without it.segmentOne part of the date, a year, a month or a day, in segmented.segment-placeholderA segment with nothing in it yet. Applied with segment.segmentsThe row of segments that holds the date, in segmented.surfaceThe floating panel.tagsThe row the dates sit in.triggerThe control that opens the calendar.trigger-iconThe icon on the button that opens the calendar.
Custom stateDescriptionblankThe field holds no date.invalidThe field has an error to show, from the browser's validation or from your feedback.openThe calendar is open.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionBoundedA date within a set window, with weekends disabled.DisabledA disabled field with a date in it.EventsA typed date and a date picked from the calendar fire the same events.InvalidA date before the earliest allowed, with the error message the field shows.IsoA date input that shows its value in the ISO style, such as 2026-08-04.MonthsFour months at once, two to a row, for dates that cross several months.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 date and an end date, chosen in the same calendar.RestrictedDates that cannot be chosen, and a week that starts on Monday.SegmentedA date set one part at a time, in the order the locale writes a date.