Search input

Release dato: 29.11.2023

Sist oppdatert: 11.05.2026

Search input (søkefelt) lar brukeren navigere ved å skrive inn nøkkelord eller setninger og få opp relevante resultater. Komponentens formål er å hjelpe brukeren å finne fram til riktig innhold, enten i hele løsningen eller innenfor et avgrenset område.

Test komponenten

Relaterte komponenter

Varianter

Variant Bruk
Globalt søk Søkefelt som dekker hele løsningen eller nettstedet, bruk når brukeren skal søke på tvers av alt innhold (kun i header)
Lokalt søk Avgrenset søkefelt med knapp, brukes i lister eller tabeller
Lokalt med synlig knapp Avgrenset søkefelt uten knapp, kun med ikon
Globalt søk med rund og gul søkeknappLokalt søk med mørk blå firkantet søkeknappLokalt søk med integrert søkeknapp

Størrelser

Search input kan brukes i tre ulike størrelser:

Størrelser Bruk
Medium (default) Standard, og skal brukes som hovedregel
Small For trange flater, som tabeller og kompakte skjema
XSmall For ekstra trange flater, som kompakte tabeller og informasjonstette fagsystemer
Eksempel på search input i forskjellige størrelser

Retningslinjer for bruk

Bruk search input når

  • du ønsker at brukeren skal kunne søke i hele løsningen (globalt søk)
  • brukeren skal filtrere eller søke i et avgrenset område (lokalt søk)

Unngå search input når

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 pasienter eller en liste med elementer.

Plassholdertekst og label

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.

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.

Gjør slik

Skriv logisk og tydelig label og plassholdertekst som hjelper brukeren med hva slags innhold de skal fylle inn

Unngå

Unngå for generell plassholdertekst som ikke gir brukeren indikasjon på hva de kan søke etter

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.

Universell utforming

  • Label må alltid finnes i koden, selv når den ikke er synlig
  • “ESC” sletter teksten i feltet
  • “Enter” utfører søket
  • Søkeforslag må være navigerbare med piltaster og ha riktige ARIA-attributter

Anatomi

Element Beskrivelse
Inputfelt Feltet der brukeren skriver søket
Plassholdertekst Viser brukeren hva de kan søke etter
Knapp/ikon Brukes for å sende inn søket
Label Ledetekst (kan være skjult visuelt men skal finnes i koden)

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Elements: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig før du tester den. Dette kan gjøres ved å kjøre denne kodelinjen før testene kjøres: 

await window.customElements.whenDefined("pkt-searchinput");

Egenskaper

PktSearchInput

Props

Prop:
id
Type:
string
Beskrivelse:
Unik id for søkefeltet
Prop:
name?
Type:
string
Beskrivelse:
Navn som sendes med skjemaet ved innsending (name på input).
Prop:
appearance?
Type:
"local" | "local-with-button" | "global"
Standardverdi:
"local"
Beskrivelse:
Utseende til søkefeltet. Lokalt med ikon i feltet, lokalt med egen søkeknapp, eller globalt søkt med gult felt og søkeknapp.
Prop:
inputSize?
input-size?
Type:
"small" | "medium" | "xsmall"
Standardverdi:
"medium"
Beskrivelse:
Visuell størrelse for felt, ikoner og søkeknapp.
Prop:
placeholder?
Type:
string
Beskrivelse:
Tekst som vises i søkefeltet når det er tomt.
Prop:
label?
Type:
string
Beskrivelse:
Synlig eller skjult ledetekst; brukes også som tilgjengelig tekst for søkeknappen der det er relevant.
Prop:
value?
Type:
string
Beskrivelse:
Verdien som er skrevet inn i søkefeltet.
Prop:
disabled?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Deaktiverer felt og knapp.
Prop:
fullwidth?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Om søkefeltet skal strekke seg over tilgjengelig bredde.
Prop:
action?
Type:
string
Beskrivelse:
URL for hvor søket skal sendes. Uten verdi er komponenten ikke et skjema. I React kan nettleseren gå til URL ved innsending (søkeknapp / Enter), med mindre du håndterer søk med onSearch.
I Elements må man lytte på pkt-search og navigere selv (f.eks. window.location eller router).
Prop:
method?
Type:
"get" | "post" | "dialog"
Beskrivelse:
Metode for skjemaet når action er satt (get, post eller dialog).
Prop:
suggestions?
Type:
PktSearchInputSuggestion[]
Standardverdi:
[{"title":"Oslo","text":"Hovedstaden i Norge"},{"title":"Bergen","text":"Vestlandets hovedstad"},{"title":"Trondheim","text":"Teknologihovedstaden"}]
Beskrivelse:
Liste med forslag til søk.

Events

Event:
onSearch
pkt-search
Type:
(value: string) => void
CustomEvent
Beskrivelse:
Når man utfører søk (Enter eller søkeknapp).
I React brukes onSearch(value).
I Elements brukes pkt-search med detail.value.
Event:
onSuggestionClick
pkt-suggestion-click
Type:
(index: number) => void
CustomEvent
Beskrivelse:
Når et forslag velges uten egen onClick på raden.
I React brukes onSuggestionClick(index).
I Elements brukes pkt-suggestion-click med detail.index og detail.suggestion. preventDefault() hindrer navigasjon ved href.
Event:
input
Type:
InputEvent
Beskrivelse:
Brukes for å oppdatere verdien i søkefeltet. Kun i Elements.
Event:
onChange
Type:
function
Beskrivelse:
Brukes for å oppdatere verdien i søkefeltet. Kun React.

PktSearchInputSuggestion

Prop:
title?
title?
Type:
string | ReactNode
string
Beskrivelse:
Tittel på forslaget. I React tillates ren tekst eller ReactNode. I Elements er kun strenger tillatt.
Prop:
text?
text?
Type:
string | ReactNode
string
Beskrivelse:
Beskrivelse eller undertittel. I React tillates både ren tekst og ReactNode. I Elements er kun strenger tillatt.
Prop:
href?
Type:
string
Beskrivelse:
Lenke for forslaget. Vil rendre raden med søkeresultatet wrappet med <a>.
Prop:
nonInteractive?
Type:
boolean
Beskrivelse:
Vil gjøre et forslag/en rad blir ikke-interagerbart og rendres som en <div> i stedet for lenke/knappp. (Typisk «Ingen resultater»). Overstyres av href hvis den er satt.
Prop:
onClick?
Type:
function
Beskrivelse:
Callback for forslaget/raden. Gjør at raden rendres som en <button> (med mindre href er satt). Gjelder kun i React.