Search input

Status
Figma	✅Publisert
CSS	✅Publisert
Vue	✅Publisert
React	✅Publisert
Dokumentasjon	✅Publisert

Om komponenten

Søkefeltet brukes til navigering på en nettside eller tjeneste. Brukeren skriver inn et nøkkelord eller en setning i søkefeltet og ser deretter relaterte resultater.

Varianter

Søkefeltet (search) kommer i tre ulike varianter, globalt, lokalt med knapp og lokalt.

Globalt (overordnet) søk

Globalt søk skal brukes når søkefeltet søker gjennom hele løsningen eller nettstedet og skal kun brukes i Oslo kommunes felles header.

Søkefeltet ligger i header og gir resultater for hele løsningen/nettsiden.

Lokalt søk

Lokalt søk brukes når brukeren skal filtrere eller søke i et mindre element på en side eller i en løsning, for eksempel oppramsning av tilgjengelige barnehager eller en liste med elementer.

Her ligger søkefeltet over tabellen, til høyre, og filtrerer listen med pasienter.

Farger

Globalt søk skal alltid brukes i gul ($yellow-1000), lokalt søk skal være i blå ($dark-blue-1000).

Slik bruker du komponenten

Label (etikett/ledetekst)

Om du ønsker kan søkefeltet brukes sammen med ledetekst (label), men det er ikke påkrevd. I de fleste tilfeller er det unødvendig med en synlig ledetekst over søkefeltet. Utformingen av søkefeltet, knappen og søkeikonet gjør funksjonen tydelig for brukeren.

Selv om ledeteksten ikke er synlig, bør den alltid være tilgjengelig for skjermlesere gjennom bruk av “label”-prop.

Plassholdertekst

Søk er det eneste inputfeltet i designsystemet som kan brukes med kun plassholdertekst, fordi feltets funksjon er tydelig selv når teksten forsvinner ved klikk.