Search input
Release dato: 29.11.2023
Sist oppdatert: 23.04.2025
En tag (også kalt badge eller chip) brukes for å merke, kategorisere eller organisere innhold med korte nøkkelord. Den kan hjelpe brukeren å raskt skanne informasjon, skille mellom kategorier eller filtrere innhold.
Live demo
Relaterte komponenter
For enkel fritekstskriving uten søkefunksjonalitet.
Kombinerer søkefelt med en nedtrekksliste.
Select gir brukeren faste valgmuligheter i en liste.
Varianter
Varianter
| Variant | Bruk |
|---|---|
| Kun tekst | Standard variant |
| Med ikon | Når ikonet skal understøtte eller forsterke teksten |
| Med “lukk”-ikon | Når tag brukes til filtrering og brukeren skal kunne fjerne valget |
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?
import { PktSearchInput } from '@oslokommune/punkt-react';Props og tokens
| Prop | Type | Beskrivelse |
|---|---|---|
name | string | Navn som sendes brukes i skjema ved innsending |
id | string | ID-en til søkefeltet |
appearance | locallocal-with-buttonglobal | Utseende av søkefeltet |
placeholder | string | Tekst som vises i søkefeltet når det er tomt |
value | string | Verdien som er skrevet inn i søkefeltet |
disabled | boolean | Er søkefeltet deaktivert? |
fullwidth | boolean | Skal søkefeltet ta opp hele bredden? |
label | string | Label for søkefeltet |
action | string | Handling som utføres når søkefeltet endres |
suggestions | array | Liste over forslag til søkefeltet |
| Event | Beskrivelse |
|---|---|
change | Hendelse som utløses når verdien i søkefeltet endres |
search | Hendelse som utløses når søkefeltet blir søkt |
suggestionClick | Hendelse som utløses når et forslag blir klikket |
Farger
| Element | CSS Variabel |
|---|---|
| Border | |
| Label | |
| Plassholdertekst | |