Intro
Search er et søkefelt med eller uten tilhørende søkeknapp.
Eksempler
Hvis du er i tvil om hvilken variant du skal bruke, er det sikkert denne som er riktig.
Primary brukes der søk er hovedfunksjon, f.eks. ved globalt søk. Merk at det som regel bare skal finnes ett primary søk på en og samme side.
Simple er en forenklet variant av søkefeltet uten søkeknapp. Den brukes særlig på input-felter der innholdet blir oppdatert fortløpende eller ved autocomplete med dropdown.
Small brukes på interne flater der det er behov for et mer komprimert grensesnitt. Small passer også i tilknytning til en komponent, for eksempel til filtrering av data i en tabell.
Vi har valgt å sette label som default skjult i søkfeltet. Dette kan lett endres på med prop `hideLabel`.
Children kan erstatte knapp hvis man f.eks. trenger eget ikon eller 'type'-prop.
Retningslinjer
Primary vs. secondary
Hvis du er i tvil om hvilken variant du skal bruke, er det sikkert secondary som er riktig. Primary brukes der søk er hovedfunksjon, f. eks. ved globalt søk. Merk at det som regel bare skal finnes ett primary-søk på en og samme side.
Label
I de fleste tilfeller er det ikke nødvendig med en synlig label på søk. Søkefeltets utforming, knapp og søkikon gjør funksjonen tydelig for brukeren. Selv om label ikke er synlig, skal den alltid være tilgjengelig for skjermleser gjennom label
-prop.
Bredde
Søkefeltets bredde bør tilsvare lengden på søkeordene som brukes. Feltets størrelse er et viktig signal til brukeren om hva de kan skrive inn. Et søkefelt som brukes til å søke på personnumre bør ha en bredde som tilsvarer et personnummer, mens hovedsøket for et nettsted bør ha et bredere felt som lar brukerne se flere 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å scrolles for å romme typiske søk.
Innsending
Submit-knapper har som standard ingen funksjon hvis de ikke er knyttet til et form
-element. Vi anbefaler derfor å bruke et form
-element rundt komponenten og en onSubmit
for å håndtere innsending. Form rundt Search hjelper også noen skjermlesere å tolke søkefeltet som et søk.
Autofokus
Hvis søket er hovedoppgaven på en side, kan det være nyttig med autofokus på søkefeltet når siden lastes inn. Dette gjør du ved å bruke autofocus
-attributtet på inputfeltet.
Tilgjengelighet
Søk-landemerke
Hvis du vil eksponere søket for hjelpemidler som et ARIA søk-landemerke, kan du legge det i et element med role="search"
. Dette kan være nyttig om søket er en viktig del av sidens funksjonalitet, som for eksempel hovedsøket for nettsiden eller hvis søkefeltet er starten av en viktig brukeroppgave. Slik blir det mulig å navigere direkte til søket med hjelpemidler.
Dersom du har flere søk-landemerker, skal disse navngis med aria-label
eller aria-labelledby
.
Tastaturinteraksjon
Vi har gjort slik at feltet tømmes når man trykker Esc. Dette er gjort for å standardisere hvordan nettlesere behandler type="search"
slik at det blir likt for alle.
enter sender inn søket om søkefeltet ligger i en <form>
-tag.
Props
Search
label
- Type:
ReactNode
- Description:
hideLabel?
- Type:
boolean
- Default:true
- Description:
onChange?
- Type:
((value: string) => void)
- Description:
onClear?
- Type:
((e: SearchClearEvent) => void)
- Description:
onSearchClick?
- Type:
((value: string) => void)
- Description:
clearButtonLabel?
- Type:
string
- Default:"Tøm"
- Description:
clearButton?
- Type:
boolean
- Default:true
- Description:
variant?
- Type:
"primary" | "secondary" | "simple"
- Default:"primary"
- Description:
htmlSize?
- Type:
string | number
- Description:
role?
- Type:
string
error?
- Type:
ReactNode
- Description:
errorId?
- Type:
string
- Description:
size?
- Type:
"medium" | "small"
- Description:
disabled?
- Type:
boolean
- Description:
description?
- Type:
ReactNode
- Description:
id?
- Type:
string
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement>
- Description:
Search.Button
children?
- Type:
ReactNode
- Description:
disabled?
- Type:
boolean
- Description:
loading?
- Type:
boolean
- Default:false
- Description:
icon?
- Type:
ReactNode
- Description:
iconPosition?
- Type:
"left" | "right"
- Default:"left"
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLButtonElement>
- Description:
Tokens
Token | Fallback |
---|---|
--ac-search-button-border | --a-border-default |
--ac-search-button-border-hover | --a-border-action-hover |
--ac-search-clear-icon | --a-text-default |
--ac-search-clear-icon-hover | --a-text-action-hover |
--ac-search-button-focus-active-border | --a-surface-default |
--ac-search-error-border | --a-border-danger |