The native <input list> with <datalist> provides a basic autocomplete experience, but it cannot be styled, has no concept of required selection, and offers no mobile-friendly layout. auro-combobox is a fully featured autocomplete and selection component designed for real-world use.

Native <datalist> support varies between browsers. Some announce suggestion counts, others do not. Keyboard behavior is inconsistent, and there is no standard way to communicate selection state to screen readers.

auro-combobox provides:

• ARIA combobox pattern — The input carries role="combobox", aria-expanded, and aria-controls to properly describe the relationship between the input and the suggestions list.
• Active descendant tracking — aria-activedescendant moves with keyboard navigation so screen readers announce the highlighted option without moving DOM focus.
• Live region announcements — Selections are announced via aria-live="polite", and validation errors use aria-live="assertive".
• Full keyboard navigation — Arrow keys navigate options, Enter selects, Escape closes, Home/End jump to boundaries. A dedicated keyboard strategy handles all interactions.

Native <datalist> always allows freeform input. There is no way to restrict the user to only the provided options.

auro-combobox supports two modes:

• Suggestion mode (default) — The user can type any value. Suggestions are offered but not required.
• Filter mode — Typing filters the list and sets the component's value to the typed text, but validation keeps the input invalid until a menu option is selected. Consumers relying on value as a "committed selection" should gate on validity.

<datalist> filtering is browser-controlled and cannot be customized. Some browsers match from the start of the option text, others match anywhere.

auro-combobox filters options as the user types, with full control:

• noFilter disables filtering to show all options regardless of input
• matchWord highlights the matched portion of each option
• persistInput keeps the filter text visible after selection

Native <datalist> renders a small browser-controlled popup that cannot be repositioned or resized.

auro-combobox adapts to the viewport:

• Desktop — Suggestions appear as a positioned dropdown using Floating UI, with configurable placement, offset, flip, and shift behavior
• Mobile — Suggestions open in a fullscreen dialog via showModal(), with a configurable breakpoint (fullscreenBreakpoint)
• Width matching — The dropdown can match the input width or size independently

Native <datalist> has no built-in validation beyond standard required.

auro-combobox integrates with the Auro form validation system:

• Required field validation with mode-aware messaging (separate messages for suggestion vs. filter mode)
• Custom error messages per validity state (setCustomValidityCustomError, setCustomValidityValueMissing, setCustomValidityValueMissingFilter)
• Validation on blur with noValidate opt-out
• Error display via help text with role="alert"

<datalist> inputs have no formatting support.

auro-combobox supports input masks via the format attribute, enabling structured input (e.g., dates, phone numbers) while still offering suggestions.

<datalist> styling is entirely browser-controlled. The popup cannot be themed, and option rendering is limited to plain text.

auro-combobox is built with the Auro Design System:

• Three layout options: classic, emphasized, and snowflake
• Light and dark theme support (appearance)
• Checkmarks on selected options
• Rich HTML content in options (icons, descriptions, nested structure)
• CSS ::part() selectors for styling