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.
Låt sökfältet vara så brett som möjligt. Användaren ska alltid kunna se minst 27 tecken i fältet.
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.
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.
Sökningen ska starta både när användaren klickar på sökknappen och när den klickar på enter.
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.
Komponenten driftsattes första gången i version 10.1.11.
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 | - |
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. |
|
<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>
<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>
<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>
<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>