Open experiment
Aurora search field
A compact native search form whose aurora border wakes as the query becomes active. It preserves a persistent label, exposes a conditional clear button, and reports a useful result hint without overwhelming assistive technology.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<form class="cmp-aurora-search" role="search" action="#">
<label for="cmp-aurora-search-input">Search the lab</label>
<div class="cmp-aurora-search__shell">
<span aria-hidden="true">⌕</span>
<input
id="cmp-aurora-search-input"
type="search"
placeholder="Try “liquid button”"
autocomplete="off"
/>
<button type="button" aria-label="Clear search" hidden>×</button>
</div>
<small class="cmp-aurora-search__status" aria-live="polite">Ready for a new signal</small>
</form>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- The visible label remains associated with the native search input.
- The clear action is a named native button.
- A polite status summarizes the active query.
License: MIT License for open-source use, modification, and distribution.