Klikk på bildet eller trykk Escape for å lukke

Search er avviklet og fjernes i neste hovedversjon av Designsystemet. Koden din fungerer fortsatt inntil videre, men editoren din vil markere komponenten som avviklet.

Hvorfor fjerner vi Search?

Et søkefelt ser enkelt ut, men det finnes mange måter å lage det på. Noen tjenester vil ha en søkeknapp, andre bare et ikon. Noen søker mens du skriver, andre når du trykker Enter. Noen viser forslag, andre går rett til resultatene. Og et søkefelt i en header ser ofte ganske annerledes ut enn et i et skjema.

Search komponenten støttet noen situasjoner, men ikke alle. Den tok også noen valg for deg som ikke nødvendigvis stemmer for alle. Den bestemte for eksempel hvor ikonet skulle stå og hvordan søkeknappen skulle henge sammen med feltet. Hvis behovene dine var annerledes, måtte du jobbe mot komponenten i stedet for med den.

Vi mener disse valgene hører hjemme hos deg. Du kjenner brukerne og innholdet ditt best. Derfor gir vi deg heller byggeklossene enn én komponent med fast oppførsel:

• Input med type="search" gir deg et søkefelt som skjermlesere leser opp som et søkefelt. Legg til enterkeyhint="search" hvis du vil at tastaturet på mobil skal vise en søketast.
• Button for å sende søket.

Hva gjør du hvis du bruker den?

Du trenger ikke endre noe med en gang, men du bør bytte før neste hovedversjon.

I mange tilfeller er en Input med type="search" i et Field med en Label alt du trenger.

Vil du ha en søkeknapp, et søkeikon eller en tømmeknapp i feltet, finner du eksempler nederst i artikkelen. Det er litt CSS som du kan kopiere og tilpasse etter behov.

I Figma kan du beholde Search-komponenten slik den er, eller tilpasse den etter behov.

Eksempler

I denne CodeSandboxen (codesandbox.io) finner du eksempler på søkefelt laget med React-komponentene våre: med søkeikon, med synlig ledetekst, med søkeknapp og med tømmeknapp.

Stilene ligger i filen search.css i sandboxen. Den har alt Search gjorde, i én fil. Slik bruker du den:

1. Kopier search.css inn i prosjektet ditt, og importer den etter @digdir/designsystemet-css.
2. Legg klassen search på en <form> eller <div> rundt Input og Button. Klassenavnet er bare et eksempel, så bruk gjerne et som passer prosjektet ditt.
3. Gi søkefeltet et navn. En synlig ledetekst er best, men aria-label holder når det er tydelig hva feltet er til, for eksempel et søkefelt i headeren.

Vil du ha en tømmeknapp, bruker du en <button type="reset"> inne i en <form>, og gir feltet en placeholder. Du kan bruke placeholder=" " hvis du ikke vil ha noen plassholdertekst. Knappen viser bare et ikon, så gi den en aria-label, for eksempel «Tøm». Kommentaren øverst i search.css forklarer resten.

En reset-knapp tilbakestiller alle feltene i skjemaet, ikke bare søkefeltet. Den gjør heller ingenting hvis du styrer feltet med value og onChange i React. Da tømmer du tilstanden din i knappens onClick i stedet.

Spørsmål?

Har du spørsmål eller trenger hjelp med å bytte, ta kontakt på Slack eller opprett en sak på GitHub (github.com).

Bidragsytere

• Michael Marszalek