← Specimen

Search

A plain <div class="search-input">, no custom element. State (collapsed / expanded) lives on the host as an open attribute, so the CSS in main.css drives visibility and src/js/components/search-input.js only ever toggles that one attribute. Click the icon to expand — click outside (or press Escape) to collapse again.

Search Bar

Light version

Collapsed

Expanded

Filled

Dark version

Collapsed

Expanded

Filled

Markup

<div class="search-input">
    <button type="button" data-search-trigger class="search-toggle" aria-label="Rechercher">
        <i class="icons icon-search text-xl"></i>
    </button>
    <form data-search-form class="search-form" role="search">
        <input type="search" data-search-input class="search-input" placeholder="Recherche">
        <button type="submit" class="search-submit" aria-label="Lancer la recherche">
            <i class="icons icon-search text-xl"></i>
        </button>
    </form>
</div>

<!-- Pre-expanded (e.g. mobile, or always-open layouts) -->
<div class="search-input" open>...</div>