michaelschiemer/docs/components/search.md

Search Component

Wiederverwendbare Search-Komponente mit semantischem <search> Element.

Baseline Status

Baseline 2023: <search> Element ist Baseline Newly available.

Verwendung

Basis-Verwendung

<x-search 
    action="/search"
    method="get"
    placeholder="Search..."
/>

Mit Varianten

<!-- Header Variante -->
<x-search 
    action="/admin/search"
    method="get"
    placeholder="Search..."
    variant="header"
/>

<!-- Sidebar Variante -->
<x-search 
    action="/search"
    method="get"
    placeholder="Search..."
    variant="sidebar"
/>

<!-- Standalone Variante -->
<x-search 
    action="/search"
    method="get"
    placeholder="Search..."
    variant="standalone"
/>

Attribute

Attribut	Typ	Standard	Beschreibung
action	string	/search	Form action URL
method	string	get	HTTP method (get/post)
name	string	q	Input name attribute
placeholder	string	Search...	Placeholder text
value	string	null	Initial input value
variant	string	standalone	Variant: header, sidebar, standalone
autocomplete	boolean	true	Enable/disable autocomplete
aria-label	string	null	ARIA label for accessibility
aria-describedby	string	null	ARIA describedby for accessibility
id	string	auto-generated	Input ID

Varianten

Header Variante

Für die Verwendung im Header-Bereich. Automatisch angepasste Breite und Positionierung.

Sidebar Variante

Für die Verwendung in der Sidebar. Optimiert für schmale Bereiche.

Standalone Variante

Für eigenständige Search-Formulare. Maximale Breite 600px, zentriert.

Accessibility

Die Komponente ist vollständig accessibility-konform:

• Semantisches <search> Element
• Visuell verstecktes Label für Screen Reader
• ARIA-Attribute unterstützt
• Keyboard-Navigation unterstützt
• Focus-Management

Beispiele

Mit Autocomplete deaktiviert

<x-search 
    action="/admin/search"
    method="get"
    placeholder="Search..."
    autocomplete="false"
/>

Mit ARIA-Label

<x-search 
    action="/search"
    method="get"
    placeholder="Search..."
    aria-label="Search the website"
/>

CSS-Klassen

Die Komponente verwendet folgende CSS-Klassen:

• .admin-search - Basis-Klasse
• .admin-search--header - Header Variante
• .admin-search--sidebar - Sidebar Variante
• .admin-search--standalone - Standalone Variante
• .admin-search__input - Input-Element
• .admin-search__submit - Submit-Button
• .admin-search__icon - Search-Icon

Browser-Support

• Chrome 125+
• Firefox 129+
• Safari 18+
• Edge 125+

Migration

Von <form role="search"> migrieren

Vorher:

<form class="admin-search" role="search" action="/search" method="get">
    <input type="search" name="q" placeholder="Search..." />
</form>

Nachher:

<x-search 
    action="/search"
    method="get"
    name="q"
    placeholder="Search..."
/>

Die Komponente generiert automatisch das semantische <search> Element mit korrektem HTML-Struktur.