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.

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

Lokalt søk med mørk blå firkantet søkeknapp

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

det er få valg eller resultater (bruk select, checkbox eller radio button i stedet)
du trenger kombinasjon av søk og valgliste (bruk combobox i stedet)

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

Unngå

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");

Props

Prop	Type	Beskrivelse
`id`	`string`	Unik id for søkefeltet
`name`	`string`	Navn som sendes med skjemaet ved innsending (`name` på input).
`appearance`	`local` `local-with-button` `global`	Utseende til søkefeltet. Lokalt med ikon i feltet, lokalt med egen søkeknapp, eller globalt søkt med gult felt og søkeknapp.
`placeholder`	`string`	Tekst som vises i søkefeltet når det er tomt.
`label`	`string`	Synlig eller skjult ledetekst; brukes også som tilgjengelig tekst for søkeknappen der det er relevant.
`value`	`string`	Verdien som er skrevet inn i søkefeltet.
`disabled`	`boolean`	Deaktiverer felt og knapp.
`fullwidth`	`boolean`	Om søkefeltet skal strekke seg over tilgjengelig bredde.
`action`	`string`	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).
`method`	`get` `post` `dialog`	Metode for skjemaet når `action` er satt (`get`, `post` eller `dialog`).
`suggestions`	`PktSearchInputSuggestion[]`	Liste med forslag til søk.

Event	Type	Beskrivelse
`onSearch` `pkt-search`	`(value: string) => void` `CustomEvent`	Når man utfører søk (Enter eller søkeknapp). I React brukes `onSearch(value)`. I Elements brukes `pkt-search` med `detail.value`.
`onSuggestionClick` `pkt-suggestion-click`	`(index: number) => void` `CustomEvent`	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`.
`input`	`InputEvent`	Brukes for å oppdatere verdien i søkefeltet. Kun i Elements.
`onChange`	`function`	Brukes for å oppdatere verdien i søkefeltet. Kun React.

PktSearchInputSuggestion

Prop	Type	Beskrivelse
`title` `title`	`string \| ReactNode` `string`	Tittel på forslaget. I React tillates ren tekst eller `ReactNode`. I Elements er kun strenger tillatt.
`text` `text`	`string \| ReactNode` `string`	Beskrivelse eller undertittel. I React tillates både ren tekst og `ReactNode`. I Elements er kun strenger tillatt.
`href`	`string`	Lenke for forslaget. Vil rendre raden med søkeresultatet wrappet med `<a>`.
`nonInteractive`	`boolean`	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.
`onClick`	`function`	Callback for forslaget/raden. Gjør at raden rendres som en `<button>` (med mindre `href` er satt). Gjelder kun i React.