Vælg et tema
LukVælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
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.