• Alternativ til vanlig navigasjon
  • Finne raskt fram til noe spesifikt i en stor menge innhold
  • På enkeltsider eller svært små nettsteder kan søk være unødvendig
Installer
Standard search
Standard search
Primary search
Primary search
Search dark
Search dark
Search simple
Search simple
KommandoInteraksjon
EscSletter tekst i søkefeltet.
Søkefelt
Søkefeltet bør vøre bredt nok til å romme flere søkeord
Kort søkefelt
Unngå søkefelt som er så korte at deler av innholdet ikke synes.
Mobiltastatur med søkeknapp
Komponenten bruker input type "search", som betyr at mobilbrukere får opp en tastatur med en forstørrelsesglassikon istedenfor en vanlig enter-knapp.
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
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