Egnet til:

• å finne relevant innhold raskt ved å søke

Uegnet til:

• innhold som brukeren enkelt kan navigere til uten søk

Teknisk dokumentasjon

Se SearchField i Storybook for tekniske detaljer. 

Varianter

SearchField kommer i tre varianter, hvor størrelsen er forskjellen som skiller dem: medium, large og extraLarge.

Du kan velge mellom høyrestilt ikon med forstørrelsesglass eller tekst med ordet «Søk». Det er også mulig å ha en kompleks treffliste som viser kort beskrivelse for hvert ord i trefflisten når du filtrerer. Trefflisten kan være i form av enkeltlinjer eller som sammensatte tekstblokker.

Medium

Dette eksempelet av varianten medium viser standard treffliste og høyrestilt ikon.

Large

Varianten «large» er den mellomste størrelsen – her med kompleks treffliste. 

ExtraLarge

Varianten med størst størrelse er extraLarge. 

Hvordan bruke komponenten  

• I alle størrelser skal søkefeltet ha en standard maksbredde på 400px / 25rem. 
• Krysset lar brukerne nullstille innholdet de har skrevet i søkefeltet.
• Søkfeltet skal alltid ha en ledetekst (label), men det er som regel ikke nødvendig å vise den visuelt. Standard oppførsel er derfor at ledetekst er skjult. 

Placeholder-tekst

Vi anbefaler å unngå placeholder-tekst, særlig i publikumsløsninger, fordi:

• placeholder-teksten stiles normalt med lavere kontrast og endret farge (grå), men ikke alle oppfatter dette som et inaktivt element likevel. Det betyr at folk kan komme til å tro at søkefeltet allerede er utfylt.
• placeholder-teksten forsvinner når folk begynner å skrive, som betyr at du må gjenta samme informasjonen i ledeteksten eller på andre måter.

Placeholder-tekst kan likevel ha sin plass der det trengs et mer kompakt design, for eksempel interne flater. Dersom du bruker placeholder-tekst fall denne teksten være ulik ledeteksten for søkefeltet. 

Universell utforming  

• Skjermleser får beskjed om at det vises en treffliste og antall treff.
• Med tastaturnavigasjon brukes piltast ned/opp i treffliste. Tabulator brukes til felt, nullstillknapp og søkeknapp.
• Når du velger noe i trefflista, vil søket utføres direkte og søkeknapp vil ikke kunne velges.