Søkefelt (Search)

Med knapp (standard)

Med knapp (omriss)

Uten knapp (frittstående)

Retningslinjer for bruk

Hovedkomponenten har ingen visuell tilbakemelding ved peking (hover-tilstand), siden den er delt opp i to grunnkomponenter som hver har sin egen peketilstand.

Bredden er tilpasset 30 tegn i inndatafeltet, noe som regnes som beste praksis. Den kan være større, men bør ikke være mindre.

Når bruke hvilken variant

Med knapp (fylt) — Bruk i hero-seksjoner og landingssider der søk er hovedhandlingen.
Med knapp (omriss) — Bruk i header eller kontekster med lavere visuell vekt.
Uten knapp — Bruk for inline-filtrering der det søkes fortløpende (f.eks. filterlister).

Størrelse

Velg størrelse etter kontekst:

Størrelse	Bruksområde
`xsm`	Kompakte verktøylinjer, filtre
`sm`	Sidefelter, smale kontainer
`md`	Standard — header, innholdssider
`lg`	Hero-seksjoner, landingssider

API

Egenskaper

Egenskap	Type	Standard	Beskrivelse
`size`	`'xsm' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Størrelse
`variant`	`'with-button' \| 'standalone'`	`'with-button'`	Med eller uten søk-knapp
`button-variant`	`'filled' \| 'outlined'`	`'outlined'`	Visuell stil på knappen
`placeholder`	`string`	`'Søk i [type innhold]'`	Plassholdertekst
`value`	`string`	`''`	Gjeldende søkeverdi
`disabled`	`boolean`	`false`	Deaktiverer feltet
`label`	`string`	`'Søk'`	Tilgjengelig merkelapp (aria-label)
`button-text`	`string`	`'Søk'`	Tekst på knappen

Hendelser

Hendelse	Detalj	Beskrivelse
`adb-search`	`{ value: string }`	Sendes ved innsending (klikk knapp / Enter)
`adb-input`	`{ value: string }`	Sendes ved endring i feltet
`adb-clear`	`{ value: '' }`	Sendes når tøm-knappen klikkes

CSS-deler (parts)

Del	Beskrivelse
`input`	Inndata-elementet
`button`	Søk-knappen
`clear-button`	Tøm-knappen (×)

CSS-variabler

Variabel	Standard	Beskrivelse
`--adb-search-width`	`13.5rem` (varierer per størrelse)	Bredden på inndatafeltet

Tilpasse bredde

Bruk CSS-variabelen --adb-search-width for å overstyre bredden:

<!-- Fast bredde -->
<adb-search style="--adb-search-width: 20rem"></adb-search>

<!-- Fyller tilgjengelig plass -->
<adb-search style="--adb-search-width: 100%"></adb-search>

Eksempler

I en header

<adb-search
  placeholder="Søk i arter og naturtyper"
  button-variant="outlined"
  label="Søk i arter og naturtyper"
></adb-search>

Stor versjon uten knapp

<adb-search
  variant="standalone"
  size="lg"
  placeholder="Søk"
  style="--adb-search-width: 100%"
></adb-search>

Lytting på hendelser

<adb-search
  placeholder="Søk i arter"
  @adb-search="${(e) => doSearch(e.detail.value)}"
  @adb-input="${(e) => showSuggestions(e.detail.value)}"
></adb-search>

Universell utforming (WCAG 2.1 AA)

Komponentens rot-element har role="search" for riktig landemerke.
Inndatafeltet har aria-label som gir tilgjengelig navn for skjermlesere.
Tøm-knappen har aria-label="Tøm søkefelt".
Alle ikoner er markert med aria-hidden="true".
Fokusindikator: 4px solid outline med 4px offset, tilfredsstiller WCAG 2.4.7.
Tastaturnavigering: Enter sender søket, Tab navigerer mellom felt og knapper.