Search

Native <input type="search">. Accessible, keyboard navigable, styled automatically.

Basic Search

<form role="search">
  <label for="search">Search</label>
  <input type="search" id="search"
         placeholder="Search…" autocomplete="off">
</form>

With Results

Alert
Button
Card
Modal
Table
Tabs

<input type="search" id="search"
       aria-controls="results"
       oninput="filter(this.value)">
<ul id="results" aria-live="polite">
  <!-- Populated by JS -->
</ul>

In a Toolbar

<div class="actions">
  <input type="search" placeholder="Filter…" aria-label="Filter items">
  <button class="primary">
    <span class="axicon render" data-name="Search"></span>
  </button>
</div>

Accessibility

Wrap in <form role="search"> to create a search landmark region
Always include a visible <label> — do not use placeholder as the only label
Connect results with aria-controls pointing to the results container id
Use aria-live="polite" on the results list so updates are announced
Add autocomplete="off" to prevent browser suggestions in demo/doc pages

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 Search 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.