Kode

Søgefelt

Eksempler og retningslinjer

Installation

HTML Struktur

<div class="form-group search">
    <label for="input-type-text" class="sr-only">Søg efter indhold</label>
    <input class="form-input input-char-27" id="input-type-text"
        name="search-button" title="Search" type="search">
    <button class="button button-search">Søg</button>
</div>

<div class="form-group search">
    <label for="input-type-text-icon" class="sr-only">Søg efter
        indhold</label>
    <input class="form-input input-width-xs" id="input-type-text-icon"
        name="search-icon" title="Search" type="search">
    <button
        class="button button-search"><svg class="icon-svg m-0" focusable="false" aria-hidden="true"><use xlink:href="#magnify"></use></svg><span
            class="sr-only">Søg</span></button>
</div>

Du kan styre søgefeltets bredde via input-width- og input-char- se mere under punktet formular elementer og input bredde og validering.

Du bør som oftest implementere auto-suggest på søgefelter, så brugeren foreslås relevante søge ord/sætninger.

Ordet ”Søg” skal altid fremgå af søgeknappen. Hvis der anvendes et lup-ikon, skal ”søg” fremgå i en aria-label, så skærmlæsere kan se funktionen.

Formularens felt skal have et skjult label af hensyn til skærmlæsere.