Single-select
Använd single-select när användaren kan välja ett av åtta eller fler alternativ.
Design och språk
När du ska använda komponenten
Använd single-select när användaren kan välja ett av åtta eller fler alternativ.
Etiketten
- 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 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.
Alternativen
- 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.
- Undvik överlappande alternativ, som till exempel 10-20 och 20-30 utan välj 10-20 och 21-30.
- Ska inte innehålla förkortningar och tecken som till exempel snedstreck.
- Ska börja med stor bokstav.
Hjälptext
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, statisk och dynamisk. Använd den statiska i första hand. 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. Du ska använda den statiska i första hand.
- 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.
Texten i hjälptexten
- Ska vara trevlig men inte pratig.
- Ska vara kort men tillräckligt informativ för att användaren ska bli hjälpt av den.
- Meningarna ska börja med stor bokstav och sluta med punkt.
- Ska motsvara användarens behov av hjälp.
Felmeddelanden
- Ska komma upp när användaren missat att välja ett alternativ 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.
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 | - |
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 | - |
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 formgroupname>.controls['Your <formcontrolname>'].value ? false : true">
<option value="">-- Inget valt --</option>
<option *ngFor="let option of <Your options>" [value]="option">{{option}}</option>
</select>
</jv-single-select>
Single-select
<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>Obligatorisk
<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
<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
<jv-single-select label="Favoritfrukt" help-text-ref="helptext">
<span slot="helptext" class="label__description">Välj den frukt du oftast köper</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
<jv-single-select label="Favoritfrukt" help-text-ref="helptext" error-text="Välj en frukt">
<jv-help-text slot="helptext">I en undersökning har de populäraste frukterna utsetts. Det är bananen som vi svenskar gillar mest. Därefter kommer ä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
<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>Inaktivt alternativ
Alternativ Kiwifrukt är inaktiverat i listan.
<jv-single-select label="Favoritfrukt" error-text="" error-text-ref="errortext" valid="true" help-text-ref="helptext">
<jv-help-text slot="helptext">Lite text med beskrivning för hur du ska besvara denna fråga och för att testa hur en lång beskrivning
ser ut tillsammans med ett felmeddelande ifall man fyllt i fel eller inte alls.</jv-help-text>
<span slot="errortext">Välj en frukt</span>
<select id="input8" 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 disabled="">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