Intro
Search lar brukerne utforske et nettsted eller en applikasjon ved å skrive nøkkelord eller setninger.
Egnet til å:
- La brukeren navigere
- Finne raskt frem til spesifikt innhold
Vurder noe annet:
- Hvis innholdet lett kan navigeres til uten søk
Har du innspill til komponenten?
Send forslagEksempler
Varianter
Størrelser
Komponenten kommer i to størrelser: medium og small. Medium er standard, og brukes både på eksterne og interne flater. Small brukes på interne flater der det er behov for et mer komprimert grensesnitt. En small variant kan også være knyttet til en komponent som for eksempel til filtrering av data i en data-tabell.
Med eller uten label
I de fleste tilfeller er det ikke nødvendig med en synlig label på søk. Søkefeltets utforming, knapp og søkeikon gjør funksjonen tydelig for brukeren. Selv om label ikke er synlig, skal den alltid være tilgjengelig for skjermleser.
Standard search
Tertiary er standardvarianten til søk. Hvis du er i tvil om hvilken variant du skal bruke, er det sikkert denne som er riktig.

Primary search
Primary skal brukes der søk er hoved-/primær-funksjon, f.eks. ved globalt søk. Merk at det som regel bare skal finnes ett primary søk på en og samme side.

Search dark
Søkefelt som brukes på mørk bakgrunn.

Search simple
Gjelder spesielt input-felter der innholdet blir oppdatert fortløpende eller er autocomplet. Kan for eksempel være knyttet til en tabell.

Disabled
Search kan ikke være disabled.
Tilgjengelighet
Interaksjon Tastatur
Vi har skrevet kode som håndterer ESC-klikk i selve search-komponenten. I mange nettlesere vil det også være en knapp til høyre i søkefeltet som lar brukeren slette innholdet. Vi har laget ekstra funksjonalitet som gjør at denne knappen kan motta tastaturfokus. Gi oss gjerne tilbakemelding om denne endringen!
Kommando | Interaksjon |
Esc | Sletter tekst i søkefeltet. |
I tillegg vil enter sende inn skjemaet om søkefeltet ligger i et <form>
.
Bruk
Søkefeltets bredde
Søkefeltets bredde bør tilsvare størrelsen av søketermene som feltet er designet for. Feltets størrelse er en viktig cue til brukeren om hva de kan bruke søkefeltet til. Dvs., for et felt som brukes bare til å søke på personnumre bør feltets størrelse tilsvare størrelsen til en personnummer, mens for et nettsteds hovedsøk bør man bruke et bredere felt som lar brukerne se mange ord samtidig.
Ta gjerne en kikk på søkeloggene dine for å se hvordan brukerne dine ordlegger seg når de søker på sidene dine. Unngå at teksten i søkefeltet må scrolle for å romme typiske søk.


Placeholdertekst
Vi fraråder bruk av placeholdertekst for flere grunn:
- Teksten forsvinner så snart brukeren begynner å skrive i feltet, så du må uansett gjenta denne informasjonen i label eller beskrivelsen.
- Placeholdertekst må også møte kontrastkravene, men da blir teksten så mørk at brukere kan lett bli forvirret og tro at feltet allerede er fylt ut.
- Hjelpemidler håndterer placeholdertekst på forskjellige måter, så du kan ikke stole at informasjonen du har i placeholderen blir kommunisert til alle brukere.
Placeholdertekst kan vurderes på interne flater der det er behov for et mer kompakt design.

Retningslinjer
Søk-landmark
Hvis du vil eksponere søket til hjelpemidler som en ARIA "search" landmark, kan du legge den i et element med role="search"
. Dette kan være nyttig om søket er en viktig del av sidens funksjonalitet, som f.eks. hovedsøket for nettsiden eller hvis søkefeltet er starten av en viktig brukeroppgave. Dette gjør det mulig for skjermleserbrukere å navigere direkte til søket.
Dersom du bruker flere av samme type landmark på siden, bør du navngi disse, gjerne med med aria-labelledby
i dette tilfellet.
Innsending av queryen
Ved default så gjør ikke submit-knapper noe med mindre de er programmatisk assosiert med et form
-element. Vi anbefaler deform å bruke et form
-element rundt komponenten og en onSubmit
for å håndtere innsending. Form rundt Search hjelper også noen skjermelsere å bedre tolke søkefeltet som et søk.
autofocus
For interne flater, dersom søkefeltet representerer sidens hovedoppgave og målgruppa til siden er ekspertbrukere, kan det være nyttig å legge fokus på feltet automatisk når siden lastes inn. Dette gjør man ved å bruke autofocus
-attributtet på inputfeltet. Snakk med din lokale uu-ekspert for å høre om teknikken er riktig for din løsning.
Props
Search
- label ReactNode
- Search label @note Will be hidden by default, is required for accessibility reasons.
- hideLabel?boolean
- Shows label and description for screenreaders-only
- onChange? ((value: string) => void)
- Callback for value-change in input
- onClear? ((e: SearchClearEvent) => void)
- Callback for click on clear-button or Escape keydown
- clearButtonLabel?string
- aria-label on clear button
- clearButton?boolean
- If false, removes clear-button option from input.
- variant?"primary" | "secondary" | "simple"
- Changes button-variant, "simple" removes button
- error? ReactNode
- Error message for element
- errorId? string
- Override internal errorId
- size? "medium" | "small"
- Changes font-size, padding and gaps
- disabled? boolean
- Disables element @note Avoid using if possible for accessibility purposes
- description? ReactNode
- Adds a description to extend labling of a field
- id? string
- Override internal id
- className? string
- ref? Ref<HTMLDivElement>
- Search extends HTMLDivElement
Search.Button
- children? ReactNode
- Text set after <Search/> icon
- disabled? boolean
- Prevent the user from interacting with the button: it cannot be pressed or focused. @note Avoid using if possible for accessibility purposes
- loading?boolean
- Replaces button content with a Loader component, keeps width
- icon? ReactNode
- Button Icon
- iconPosition?"left" | "right"
- Icon position in Button
- className? string
- ref? Ref<HTMLButtonElement>
- Search.Button extends HTMLButtonElement
Tokens
Token | Fallback |
--ac-search-button-border | --a-border-default |
--ac-search-button-border-hover | --a-border-action |
--ac-search-clear-icon | --a-text-default |
--ac-search-clear-icon-hover | --a-text-action |
--ac-search-button-focus-active-border | --a-surface-default |
--ac-search-error-border | --a-border-danger |