Sök

Du använder en sökkomponent när du till exempel vill ge användaren flera möjligheter att navigera. Det finns fyra olika komponenter för sök och de alla har olika användningsområden.

Design och språk

Sökfältets storlek

Låt sökfältet vara så brett som möjligt. Användaren ska alltid kunna se minst 27 tecken i fältet. När du använder den töjbara sökkomponenten ska användaren kunna se 27 tecken i det utfällda läget.

Rubrik till sökkomponenten

I de flesta fall behövs inte en rubrik till sök eftersom sökikonen är den ikon som är mest igenkänd bland användare.

När sök används för ett begränsat sökområde kan du behöva beskriva för användaren vad den ska kunna söka efter. Ett exempel är om sökresultatet bara omfattar en viss begränsad del av en webbplats eller en e-tjänst. Om du behöver beskriva vad användaren kan söka efter ska du använda en rubrik istället för en placeholder eftersom en placeholder inte fungerar bra för skärmläsare samt att placeholdertexten försvinner när användaren har börjat skriva i fältet.

Placering av komponenten

Sökkomponenten ska i de flesta fall placeras i övre högra hörnet på sidan. Använder du varianten sökknapp kan den placeras ihop med andra ikoner eller knappar som är lika viktiga. Det bör då inte vara fler än fem ikoner eller knappar bredvid varandra eftersom fler val ger en sämre överblick.

I de fall sökfunktionen är den primära funktionen på sidan ska den placeras mer centralt på sidan.

Starta sökningen

Sökningen ska starta både när användaren klickar på sökknappen och när den klickar på enter. För dynamisk sök, som inte har någon knapp, startar sökningen under tiden användaren skriver eller när den klickar på enter.

Visa sökresultatet

Det ord som användren har sökt på ska stå kvar i sökfältet även efter att användaren har fått fram sökresultatet.

Sökresultatet i den dynamiska sökkomponenten ska inte innehålla fler än 10 alternativ.

Komponent och kod

Komponenten driftsattes första gången i version 10.1.11.

Parametrar på sök

Egenskap

Attribut

Beskrivning

Typ

Förvaltvärde

label

label

label som läses upp av skärmläsare.

string

-

size

size

Storlek på komponenten, möjliga storlekar är 'medium' och 'small'.

string

'medium'

valid

valid

Default så används inmatningsfältet inbyggda validering. Detta kan overridas med valid attributet om man själv vill styra om inmatningsfältet är valid.

boolean

-

Event på sök

Event

Beskrivning

Typ

submitted

Event som triggas när användaren trycker på submit knappen.

CustomEvent<any>

Medium

<form actions="" role="search">
  <jv-search label="Sök dokument">
    <input class="c-search__input" id="sök1_medium" name="sok" type="search">
  </jv-search>
</form>

Small

<form actions="" role="search">
  <jv-search label="Sök dokument" size="small">
    <input class="c-search__input" id="sök1_small" name="sok" type="search">
  </jv-search>
</form>

Valideringsfel

<form actions="" role="search">
  <jv-search label="Sök dokument" valid="false">
    <input class="c-search__input" id="sök1_error" name="sok" type="search">
  </jv-search>
</form>

Inaktiverad

<form actions="" role="search">
  <jv-search label="Sök dokument">
    <input class="c-search__input" id="sök1_disabled" disabled="" name="sok" type="search">
  </jv-search>
</form>

Sök med endast HTML och CSS

Senast publicerad

Sidansvarig för sidan är Styleguide