Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

Search

Oppdatert 31. juli 2023Stabil
GithubYarn FigmaEndringslogg

    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

    Har du innspill til komponenten?

    Send forslag

    Eksempler

    Åpne eksempel i nytt vindu

    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.

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

    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.

    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.

    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.

    KommandoInteraksjon
    EscSletter 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

    TokenFallback
    --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
    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.

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack