Autocomplete

Suggestion dropdown using native <input> + <datalist> for zero-JS autocomplete, or a custom pattern with role="combobox".

Native Datalist

<!-- Zero JS — browser provides the dropdown -->
<label for="country">Country</label>
<input type="text" id="country"
       list="country-list"
       autocomplete="off">
<datalist id="country-list">
  <option value="Australia">
  <option value="Canada">
  <option value="United Kingdom">
</datalist>

Custom Combobox (ARIA)

<input type="text" id="framework"
       role="combobox"
       aria-expanded="false"
       aria-autocomplete="list"
       aria-controls="fw-list">
<ul id="fw-list" role="listbox" hidden>
  <li role="option">Axiom01</li>
  <li role="option">Bootstrap</li>
</ul>

Accessibility

Native <datalist> is the simplest accessible option — browser handles everything
Custom comboboxes need role="combobox", aria-expanded, aria-autocomplete, aria-controls
Options need role="option" and keyboard navigation (↑↓ arrows, Enter, Escape)
Announce result count with aria-live="polite"

Features

Semantic Structure - Built with native HTML5 elements for maximum reliability.
Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
Fully Responsive - Scales perfectly from mobile to desktop screens.
No JS Dependency - Core functionality relies on pure CSS for maximum performance.
Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Autocomplete component is designed for versatile implementation across modern web applications. Ideal scenarios include:

Dashboards & Admin Panels - Structured data presentation and interface control.
Content Management Systems - Organizing complex information hierarchies and media.
E-Commerce Platforms - Enhancing product discovery and user workflows.
Marketing Sites - Highlighting key product offerings cleanly and effectively.
SaaS Applications - Delivering native-feeling, responsive app experiences.