For situations where the <auro-datepicker> web component cannot be used, a native HTML <input type="date"> element can be styled with the Auro Design System tokens to approximate the visual appearance of auro-datepicker. Unlike auro-hyperlink, Web Core Style Sheets does not provide a prebuilt .datepicker class, so the styling must be authored manually using Auro design tokens.

The native date input can be reset and restyled with the Auro design tokens published by @aurodesignsystem/design-tokens. The pattern below replicates the size, border, and focus-state colors used by auro-datepicker. Note that the browser-controlled calendar UI rendered by <input type="date"> cannot be styled — only the input chrome (the field itself) responds to CSS.

@import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css";
​
.datepicker {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: var(--ds-size-600, 3rem);
  padding: 0 var(--ds-size-200, 1rem);
  border: 1px solid var(--ds-color-border-ui-default, #6e767f);
  border-radius: var(--ds-border-radius, 4px);
  background-color: var(--ds-color-container-primary-default, #ffffff);
  color: var(--ds-color-text-primary-default, #1d252c);
  font-family: var(--ds-font-family-default, sans-serif);
  font-size: var(--ds-text-body-default-size, 1rem);
  line-height: var(--ds-text-body-default-height, 1.5);
  cursor: pointer;
}
​
.datepicker:focus-visible {
  outline: 2px solid var(--ds-color-border-active-default, #01426a);
  outline-offset: 2px;
}
​
.datepicker:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
​
.datepicker:invalid {
  border-color: var(--ds-color-border-error-default, #d50000);
}

Apply the .datepicker class to a native <input type="date"> element and pair it with a <label>:

<label>
  Departure date
  <input type="date" class="datepicker" name="departure" />
</label>

HTML has no native range input, so a range must be approximated with two separate <input type="date"> elements. The min attribute on the second input can be used to constrain the return date to be on or after the departure date, but this coordination must be wired up with JavaScript:

<fieldset>
  <legend>Travel dates</legend>
  <label>
    Departure
    <input type="date" class="datepicker" name="departure" id="departure" />
  </label>
  <label>
    Return
    <input type="date" class="datepicker" name="return" id="return" />
  </label>
</fieldset>

While the CSS above replicates the visual styling of the auro-datepicker input chrome, the following functionality built into the auro-datepicker web component is not available when using plain HTML:

Native date inputs vary widely across browsers and platforms, with inconsistent screen reader announcements, keyboard behavior, and focus management. auro-datepicker provides full arrow-key navigation of the calendar grid, rich ARIA labels on every cell (including state like "selected", "today", "unavailable", "in range"), aria-live announcements when the visible month changes, support for prefers-reduced-motion, and managed focus when the calendar opens and closes. With a native input, all of this is delegated to the browser and often differs significantly between Chrome, Safari, and Firefox — sometimes with no keyboard navigation of the calendar grid at all.

HTML has no native concept of a date range picker. Building one from two <input type="date"> elements requires custom logic for coordinating values, enforcing start-before-end ordering, and providing a unified visual experience. auro-datepicker handles this with a single range attribute, providing two coordinated input fields, visual range highlighting across the calendar grid, customizable ARIA labels for range positions, and automatic value coordination between the start and end dates.

Native date inputs have no mechanism to mark specific dates as unavailable. min and max can restrict to a contiguous range, but they cannot express "these specific dates within the range are not selectable." auro-datepicker supports a blackoutDates array of ISO date strings that are visually styled as unavailable, announced to screen readers with a customizable label, focusable but not selectable, and validated on typed input to surface a customError validity state.

Native date validation is limited to required, min, and max, and error messages are browser-controlled. auro-datepicker integrates with the Auro form validation system, exposing per-constraint setters (setCustomValidityValueMissing, setCustomValidityRangeOverflow, setCustomValidityRangeUnderflow, setCustomValidityCustomError), running validation on blur, on value change, and when constraints change, dispatching auroFormElement-validated events, and displaying errors inline via the help text slot.

Native date inputs render a small, browser-controlled popup that cannot be styled or repositioned. auro-datepicker adapts to viewport size: on desktop the calendar appears as a positioned dropdown bib, with an optional desktopModal mode that traps focus and makes background content inert; on mobile it opens as a fullscreen dialog via showModal() with a configurable fullscreenBreakpoint; and on desktop range mode it can display two months side-by-side.

Native <input type="date"> follows the browser's locale for display format but offers no control over month names, navigation labels, or ARIA text. auro-datepicker supports custom monthNames arrays for any language, localizable navigation labels (navLabelPrevMonth, navLabelNextMonth), localizable range position labels for screen readers, a customizable blackoutLabel, and a configurable date display format.

Native date inputs render a fixed grid of numbers, with no way to add prices, icons, or supplementary information to individual dates. auro-datepicker supports per-date slot content via date_YYYY_MM_DD slots for content rendered below each date number (e.g. flight prices) and popover_YYYY_MM_DD slots for content that appears on hover or focus for a specific date, enabling reference data alongside dates for decision-making.

A native <input type="date"> cannot be styled to match a design system — shadow DOM browser controls resist CSS customization and the calendar popup is entirely outside author control. auro-datepicker is built with the Auro Design System, providing consistent visual language with other Auro form components, light and dark theme support (appearance="default" or appearance="inverse"), CSS custom properties and ::part() selectors for targeted styling, and composition from versioned Auro sub-components (dropdown, input, button, icon).

Use auro-datepicker whenever possible. Fall back to a CSS-styled native <input type="date"> only in environments where custom elements are not supported or when integrating with third-party systems that require plain HTML — and be prepared to accept the browser's calendar UI as-is and to reimplement range coordination, blackout handling, custom validation messaging, and accessibility affordances yourself.