SearchField

Egnet til:

• å finne relevant innhold raskt ved å søke
• når du har et resultat å gå til, for eksempel en treffliste eller personoversikt.

Uegnet til:

• innhold som brukeren enkelt kan navigere til uten søk
• autofullføring av opplysninger inni et skjema (bruk TextField med datalist i stedet, se mønster for å velge flere for eksempel)

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 liste med hurtigoppslag som gir det brukeren mulighet til å hoppe direkte til et søkeresultat. Hurtigoppslagene kan være i form av enkeltlinjer eller som sammensatte tekstblokker.

Medium

Brukes typisk i toppen i interne løsninger. Dette eksempelet av varianten medium viser søkefeltet med hurtigoppslag og standard ikon. Når elementet velges tas man til resultatsiden for innholdet, for eksempel i dette tilfellet en oversiktsside for kjøretøyet.

Large

Brukes typisk på søke på landingssider i interne løsninger. Dette eksemplel med mer sammensatt hurtigoppslag, med tekst og beskrivelse.

ExtraLarge

Brukes til globalt søk i publikumsløsninger (i TopBannerExternal). Et søk tar brukeren til treffliste på skatteetaten.no.

Hvordan bruke komponenten  

• Trykk på søkeknappen tar brukeren til resultatvisning. Hvis man har «live» søkeresultat, vil både trykk knappen og å valg fra listen ta brukeren til resultatvisning, for eksempel en egen side for virksomhet eller kjøretøy.
• 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.
• Hvis søkefeltet er omsluttet av et form-element, legg til attributtet role="search" på elementet for å gjøre formålet tydelig for hjelpeteknologi.