Gå til sidens indhold
Det Fælles Designsystem

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Kode

Søgefelt

Åbn dette eksempel i et nyt vindue: search
Eksempel på søgefelt

Eksempler og retningslinjer

Installation

HTML Struktur

Kodeeksempel
<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"
        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-char-27" id="input-type-text-icon" name="search-icon"
        type="search">
    <button class="button button-search">
        <svg class="icon-svg m-0" focusable="false" aria-hidden="true"><use xlink:href="#search"></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.