Styleguide

Sök

Du använder en sökkomponent när du till exempel vill ge användaren flera möjligheter att navigera och lättare hitta det användaren letar efter.

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.

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. Men om du använder sök 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. 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.

Visa sökresultatet

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

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'

extraClass

extra-class

Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2"

string

-

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

-


Listener på sök

Event

Beskrivning

Typ

submitted

Event som triggas när användaren trycker på submit knappen. I detail till detta event ligger det eventen som initierade "submit"-operationen, t.ex. PointerEvent.

CustomEvent<any>

Medium

HTML 
<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

HTML 
<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

HTML 
<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

HTML 
<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