Intro
Search lar brukerne utforske et nettsted eller en applikasjon ved å skrive nøkkelord eller setninger som leter frem det mest relevante innholdet for dem.
Egnet til:
- Raskt finne relevant innhold
Uegnet til:
- Innhold som lett kan navigeres til uten søk
Eksempler
Vi har valgt å sette label som default skjult i søkfeltet. Dette kan lett endres på med prop `hideLabel`.
Varianter
Størrelser
Komponenten kommer i to størrelser.
- Medium (standard) 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 tabell.
Vise 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.
Visuell label er skjult som standard, men kan vises ved hjelp av hideLabel-propen dersom det er behov for dette.
Secondary
Secondary er standardvarianten til søk. Hvis du er i tvil om hvilken variant du skal bruke, er det sikkert denne som er riktig.
Primary
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.
Darkmode
Darkmode-varianten er beregnet for bruk på mørke bakgrunner. Dette gjøres ved å sette data-theme="dark" på wrapper.
Simple
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.
Retningslinjer
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.
Placeholder-tekst
Vi fraråder bruk av beskrivende placeholder-tekst av flere grunner:
- Teksten forsvinner så snart brukeren begynner å skrive i feltet, så du må uansett gjenta denne informasjonen i labelen eller beskrivelsen.
- Kontrastkravene gjelder også for placeholder-tekst. For å oppfylle disse, må teksten være så mørk at brukerne kan tro at feltet allerede er fylt ut.
- Hjelpemidler håndterer placeholder-tekst på forskjellige måter, så du kan ikke stole på at alle brukerne får med seg denne informasjonen.
Placeholder-tekst kan likevel vurderes på interne flater der det er behov for et mer kompakt design.
Retningslinjer
Søk-landmark
Hvis du vil eksponere søket for hjelpemidler som en ARIA "search" landmark, 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 f.eks hovedsøket for nettsiden eller hvis søkefeltet er starten av en viktig brukeroppgave. Slik blir 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
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 intern-flate-side og målgruppa til siden er ekspertbrukere, 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. Snakk med din lokale uu-ekspert for å høre om teknikken er riktig for din løsning.
Tilgjengelighet
Tastaturinteraksjon
Vi har lagt til håndtering av ESC-event på Search sammen med en standard "slett innhold"-knapp. Dette er gjort for å standardisere hvordan nettlesere behandler type="search" slik at det blir likt for alle og mer tilgjengelig.
| Kommando | Interaksjon |
|---|---|
| Esc | Sletter tekst i søkefeltet. |
I tillegg vil enter sende inn skjemaet om søkefeltet ligger i et <form>.
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
- onSearchClick? ((value: string) => void)
- Callback for Search-button submit
- 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
- htmlSize? string | number
- Exposes the HTML size attribute
- 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>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- 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>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- 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 |