SearchInput

Kildekode på GitHub · Les som Markdown

SearchInput er et søkefelt med innebygd søkeikon og tøm-knapp. Stylet med underline-stil. Støtter innebygd label og feilmelding, samt alle standard HTML input-attributter.

Utforsk

Søk

label

placeholder

error

disabled

<SearchInput label="Søk" placeholder="Søk etter noe..." />

Importering

import { SearchInput } from "@kilden/designsystem";

Grunnleggende bruk

<SearchInput placeholder="Søk..." />

Med label

Bruk label-propen for å legge til en synlig label koblet til søkefeltet.

<SearchInput label="Søk" placeholder="Søk etter komponenter..." />

Med feilmelding

Bruk error-propen for å vise en feilmelding under feltet. Dette setter også visuell error-state med rød bunnlinje og aria-invalid på inputen.

<SearchInput label="Søk" error="Du må skrive et søkeord" />

Deaktivert

<SearchInput label="Søk" placeholder="Kan ikke søke" disabled />

Bruksanbefalinger

Søk

Bruk alltid en label

Alle søkefelt må ha en synlig label eller en aria-label som forklarer hva feltet er til.

Ikke bruk placeholder som label

Placeholder forsvinner når brukeren begynner å skrive. Bruk label-propen eller aria-label i tillegg.

Søk

Bruk SearchInput for søk

Bruk SearchInput for søkefelt, ikke en vanlig Input med type='search'. SearchInput gir søkeikon og tøm-knapp ut av boksen.

Navn

Ikke bruk for vanlig tekstinput

Bruk Input for vanlige tekstfelt. SearchInput er kun ment for søkefunksjonalitet.

Tilgjengelighet

label-propen kobler automatisk label til input via id/htmlFor
error-propen setter aria-invalid og kobler feilmelding via aria-describedby
Feilmelding har role="alert" for skjermlesere
Tøm-knappen har aria-label="Tøm søk" for skjermlesere
Input har type="search" som gir riktig semantikk
Tydelig fokusindikator med tykkere bunnlinje
Disabled-tilstand kommuniseres via HTML disabled-attributtet

Props

SearchInput arver alle props fra <input> (unntatt type), pluss disse:

Prop	Type	Default	Beskrivelse
`label`	`string`	—	Synlig label over søkefeltet
`error`	`string`	—	Feilmelding under feltet (aktiverer error-state)
`onClear`	`() => void`	—	Kalles når brukeren klikker tøm-knappen
`placeholder`	`string`	—	Plassholdertekst
`disabled`	`boolean`	`false`	Deaktiver feltet
`value`	`string`	—	Kontrollert verdi
`onChange`	`(e: ChangeEvent) => void`	—	Kalles ved endring