Aksel

Meny

Search

Oppdatert Stabil
GithubYarn FigmaEndringslogg

Intro

Search er et søkefelt med eller uten tilhørende søkeknapp.

Egnet til:

  • Fritekstsøk

Uegnet til:

Har du innspill til komponenten?

Send forslag

Eksempler

Hvis du er i tvil om hvilken variant du skal bruke, er det sikkert denne som er riktig.

SandboxSandbox
Åpne eksempel i nytt vindu

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.

GjørSøkefelt
Søkefeltet bør være bredt nok til å romme forventet verdi.
UnngåKort søkefelt
Unngå søkefelt som er så korte at deler av innholdet ikke synes.

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:

clearButton?

  • Type:
    boolean
  • Default:
    true
  • Description:

variant?

  • Type:
    "primary" | "secondary" | "simple"
  • Default:
    "primary"
  • Description:

htmlSize?

  • Type:
    string | number
  • Description:

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:

clearButtonLabel?

  • Deprecated:
    Use `<Provider />`-component
  • Type:
    string
  • Default:
    "Tøm feltet"
  • 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

TokenFallback
--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
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.