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.
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.
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.
Størrelse
Det er ikke påkrevd, men det anbefales at et tekstfelt ikke er bredere enn 500 px, dette gjelder også søkefeltet.
Responsivitet
På mobil legger det overordnede søket seg som et forstørrelsesglassikon. Ved klikk åpnes søkefeltet under headeren.
Lokale søk skal ligge over innholdet de filtrerer eller søker i.
Gjør slik/ikke gjør slik
Ikke gjør søkefeltet for smalt for vanlig/forventet inputtekst
Bruk plassholderteksten til å gi brukeren en indikasjon på hva de kan fylle inn
Anatomi
Globalt søk
- Inputfelt
- Plassholdertekst
- Knapp
Lokalt søk med knapp
- Ledetekst (label)
- Inputfelt
- Plassholdertekst
- Knapp
Lokalt søk
- Ledetekst (label)
- Inputfelt
- Plassholdertekst
- Søkeikon