SearchInput

@/components/ui/SearchInput

Ett søkefelt for hele systemet: lupe til venstre, samme høyde/kant/fokus som Input.

Når brukes den

Søkefelt i lister og oversikter — bruk DENNE, ikke `Input` med et lupe-ikon lagt oppå.
Mønsteret var håndrullet sju steder (kundeliste, tiltak, adressesøk, ⌘K-paletten, leverandørsøk, sameiesøk) før denne fantes.
Bølge 3: bygger på `Input` (lupa er `prefix`, tøm-knappen er `suffix`) i stedet for å duplisere feltets bg/kant/hover/fokus lokalt.
`onClear` er valgfri og gir en tøm-knapp først når feltet har innhold — utelatt finnes ingen kryss.
Har aldri etikett over seg eller feilmelding under — lupa og plassholderen ER etiketten. Trenger feltet det, bruk `Input` i stedet.

Standard

Uten `onClear` — et rent, enkelt søkefelt.

<SearchInput placeholder="Søk på navn eller org.nr…" onChange={...} />

Med tøm-knapp

Med `onClear` og innhold — tøm-knappen vises kun når feltet faktisk har tekst.

Deaktivert

Videreført fra Input — dempet flate, ingen hover.

Sveip tabellen for å se hele innholdet

Navn

Type

Default

Beskrivelse

className

string

—

Layout-klasser. Havner på selve roten, ikke på et element inni.

onClear

() => void

—

Viser en tøm-knapp når feltet har innhold. Utelatt: ingen tøm-knapp.

placeholder

string

'Søk…'

Fungerer også som feltets tilgjengelige navn når `aria-label` ikke er satt.

value, onChange, …

InputHTMLAttributes<HTMLInputElement>

—

Alle vanlige input-attributter utenom `type`, som er fast «search».