Styleguide

Single-select

Använd single-select när användaren kan välja ett av åtta eller fler alternativ.

Design och språk

  • Om det inte är obligatoriskt att svara så lägg in ett tomt alternativ, till exempel "Vill inte svara" eller "Vet inte" så att användaren har möjlighet att ångra en inmatning.
  • Placera alternativen i en logisk ordning och lägg det mest valda alternativet överst. Är det till exempel antal kan du börja med det lägsta eller med det högsta, beroende på vad som är mest vanligt, och sedan fortsätta i en logisk ordning.
  • Undvik bokstavsordning om det inte är det mest logiska.
  • Användaren ska alltid kunna hitta ett alternativ som passar. Det kan innebära att du måste lägga till ett alternativ som till exempel vet ej eller övrigt.
  • Undvik överlappande alternativ, som till exempel 10-20 och 20-30 utan välj 10-20 och 21-30.

Texten på etiketten och alternativen

  • Ska vara kort.
  • Ska helst vara så tydlig så användaren förstår vad den ska välja utan att du behöver ha en hjälptext.
  • Ska helst inte innehålla förkortningar och tecken som till exempel snedstreck.
  • Ska börja med stor bokstav. Avsluta inte med en punkt, även om etiketten eller alternativen består av mer än ett ord.

Hjälptext

Hjälptexten ska hjälpa användaren att fylla i rätt information i fältet.

I första hand ska du använda en så pass tydlig etikett så att en hjälptext inte behövs. Behöver du använda en hjälptext kan du välja mellan två varianter. Du ska använda samma variant i hela systemet och alltså inte blanda dem. Varianterna är:

  • Statisk hjälptext som visas hela tiden för användaren och som används för korta hjälptexter.
  • Dynamisk hjälptext som är dold och visas först när användaren väljer att klicka på ikonen för hjälptext. Den dynamiska hjälptexten ska du använda vid långa hjälptexter.

Behöver du en hjälptext ska du i första hand välja den statiska hjälptexten. Hjälptexten ska vara trevlig men inte pratig. Texten ska vara kort men tillräckligt informativ för att användaren ska bli hjälpt av den. Meningarna i hjälptexten ska börja med stor bokstav och sluta med punkt. För att kunna skriva en bra hjälptext behöver du också förstå användarens behov.

Felmeddelanden

  • Ska komma upp när användaren missat att välja ett värde i de fall fältet är obligatoriskt.
  • Tonen ska vara trevlig och inte anklagande. Det är lämpligt att börja beskrivningen med "Välj...", till exempel "Välj en hundras".

Alternativa komponenter

Komponent och kod

Komponenten driftsattes första gången i version 1.0.0. Komponenten single select finns i två storlekar medium och small. Storleken small kan du använda om utrymmet på skärmen är begränsat.

Parametrar på single-select

Egenskap

Attribut

Beskrivning

Typ

Förvalt värde

errorText

error-text

Feltext som visas ifall "valid" är satt till "false".

string

-

errorTextRef

error-text-ref

Referens till en feltext som visas ifall "valid" är satt till "false".

string

-

formatText

format-text

Text som beskriver förmatet i vilket inmatningsfältet ska fyllas i med.

string

-

helpTextRef

help-text-ref

Referens till hjälptext.

string

-

extraClass

extra-class

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

string

-

label

label

Label text.

string

-

size

size

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

string

'medium'

valid

valid

Dafualt 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

-

selectedValue

selected-value

Sätter förvaltvärde i komponenten.

string

-

Angular

För att få förvalda värden att synas för single-select med Angular FormControl och ngModel behöver du sätta attributet data-empty till false.

<jv-single-select label="Favoritfrukt">
  <select formControlName="<Your formcontrolname>" 
  	label="<Your label>" id="<Your id>" 
   [attr.data-empty]="<Your formcontrolname> ? false : true">
    <option value="">-- Inget valt --</option>
    <option *ngFor="let option of <Your options>">{{option}}</option>
  </select>
</jv-single-select>

Medium

HTML 
<jv-single-select label="Favoritfrukt">
  <select id="select_large">
    <option value="">-- Inget valt --</option>
    <option>Ananas</option>
    <option>Apelsin</option>
    <option>Banan</option>
    <option>Blodapelsin</option>
    <option>Clementin</option>
    <option>Dadel</option>
    <option>Kiwifrukt</option>
    <option>Päron</option>
    <option>Äpple</option>
  </select>
</jv-single-select>

Small

Storleken small innehåller buggar i ios på små skärmar. Du bör därför använda medium varianten för små skärmar.

HTML 
<jv-single-select label="Favoritfrukt" size="small">
  <select id="select_medium">
    <option value="">-- Inget valt --</option>
    <option>Ananas</option>
    <option>Apelsin</option>
    <option>Banan</option>
    <option>Blodapelsin</option>
    <option>Clementin</option>
    <option>Dadel</option>
    <option>Kiwifrukt</option>
    <option>Päron</option>
    <option>Äpple</option>
  </select>
</jv-single-select>

Obligatorisk

HTML 
<jv-single-select label="Favoritfrukt">
  <select id="select_required" required>
    <option value="">-- Inget valt --</option>
    <option>Ananas</option>
    <option>Apelsin</option>
    <option>Banan</option>
    <option>Blodapelsin</option>
    <option>Clementin</option>
    <option>Dadel</option>
    <option>Kiwifrukt</option>
    <option>Päron</option>
    <option>Äpple</option>
  </select>
</jv-single-select>

Valideringsfel

HTML 
<jv-single-select label="Favoritfrukt" required="" error-text="Välj en frukt" valid="false">
  <select id="select_error">
    <option value="">-- Inget valt --</option>
    <option>Ananas</option>
    <option>Apelsin</option>
    <option>Banan</option>
    <option>Blodapelsin</option>
    <option>Clementin</option>
    <option>Dadel</option>
    <option>Kiwifrukt</option>
    <option>Päron</option>
    <option>Äpple</option>
  </select>
</jv-single-select>

Statisk hjälptext

Den frukt du köper oftast
HTML 
<jv-single-select label="Favoritfrukt" help-text-ref="helptext">
  <span slot="helptext" class="label__description">Den frukt du köper oftast</span>
  <select id="select_statisk">
    <option value="">-- Inget valt --</option>
    <option>Ananas</option>
    <option>Apelsin</option>
    <option>Banan</option>
    <option>Blodapelsin</option>
    <option>Clementin</option>
    <option>Dadel</option>
    <option>Kiwifrukt</option>
    <option>Päron</option>
    <option>Äpple</option>
  </select>
</jv-single-select>

Dynamisk hjälptext

ICA har undersökt vilka frukter som är populäras i sina cirka 1 400 butiker och kommit fram till att det är bananen som vi svenskar gillar mest. Därefter hittas äpple och apelsin. Vilken är din favorit?
HTML 
<jv-single-select label="Favoritfrukt" help-text-ref="helptext" error-text="Välj en frukt">
  <jv-help-text slot="helptext">ICA har undersökt vilka frukter som är populäras i sina cirka 1 400 butiker och kommit fram till att det är bananen som vi svenskar gillar mest. Därefter hittas äpple och apelsin. Vilken är din favorit?  </jv-help-text>
  <select id="dynamisk_select" required="">
    <option value="">-- Inget valt --</option>
    <option>Ananas</option>
    <option>Apelsin</option>
    <option>Banan</option>
    <option>Blodapelsin</option>
    <option>Clementin</option>
    <option>Dadel</option>
    <option>Kiwifrukt</option>
    <option>Päron</option>
    <option>Äpple</option>
  </select>
</jv-single-select>

Inaktiverad

Den frukt du köper oftast
HTML 
<jv-single-select label="Favoritfrukt" help-text-ref="helptext" error-text="Välj en frukt">
  <jv-help-text slot="helptext">Den frukt du köper oftast</jv-help-text>
  <select id="select_disabled" disabled="">
    <option value="">-- Inget valt --</option>
    <option>Ananas</option>
    <option>Apelsin</option>
    <option>Banan</option>
    <option>Blodapelsin</option>
    <option>Clementin</option>
    <option>Dadel</option>
    <option>Kiwifrukt</option>
    <option>Päron</option>
    <option>Äpple</option>
  </select>
</jv-single-select>

Endast HTML och CSS

Exempel

Senast publicerad

Sidansvarig för sidan är Styleguide