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

Fast sök

<form actions="" role="search">
  <label for="sök1" class="screen-reader-text"> Sök dokument </label>
  <div class="c-search">
    <input class="c-search__input" type="search" name="sok" id="sök1">
    <button class="c-search__button" type="submit" aria-label="sök">
      <span class="sjv-i-sok c-search__ikon"></span>
    </button>
  </div>
</form>

Töjbar sök

Använd den töjbara sökkomponenten när du egentligen vill ha en vanlig sök men utrymmet är begränsat.

Parametrar på töjbar sök

Egenskap

Attribut

Beskrivning

Typ

Förvalt värde

fullWidth

full-width

Styr vad fullbredden ska vara på komponenten.

string

'100%'

initWidth

init-width

Initiala bredden på komponenten.

string

'12.5em'

label

label

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

string

-

Event på töjbar sök

Event

Beskrivning

Typ

submitted

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

CustomEvent<any>

<jv-search-stretch label="Sök artiklar" init-width="12.5em" full-width="100%">
  <input class="c-search__input" autocomplete="off" type="search" name="Sök artiklar" id="sök2">
</jv-search-stretch>

Äldre version av töjbar sök

Dynamisk sök

Använd den dynamiska sökkomponenten när sök är den primära funktionen på sidan och det finns tillräckligt med plats för den. Den dynamiska söken ska kompletteras med en lista med sökresultat. Den dynamsiska söken kan användas som snabbsök med en filtrering.

<form actions="" role="search">
   <label for="sök4" class="screen-reader-text"> Sök person </label>
   <div class="c-dynamic-search">
      <input class="c-search__input" type="search" name="sok" id="sök4">
      <button type="submit" class="c-search__button" tabindex="-1" aria-hidden="true">
         <span class="sjv-i-sok c-search__ikon"></span>
      </button>
   </div>
</form>

Sökknapp

Använd sökknappen när sökfunktionen inte är så viktig för användaren. När användaren klickar på sökknappen ska någon av de andra sökkomponenterna visas för användaren. När användaren klickar på sökknappen ska fokus flyttas till sökfältet i den sökkomponent som du har valt att komplettera sökknappen med.

Parametrar på sökknapp

Egenskap

Attribut

Beskrivning

Typ

Förvalt värde

activate

activate

Ska sökknapen vara aktiv?

boolean

false

Event på sökknapp

Event

Beskrivning

Typ

activateChange

Change event som triggas när sökknappen aktiveras.

CustomEvent<boolean>

<jv-search-button></jv-search-button>

Äldre version av sökknapp

Senast publicerad

Sidansvarig för sidan är Styleguide