Multi-select
Använd multi-select när du har fler än sju alternativ och användaren ska kunna välja mer än ett av alternativen.
Design och språk
När du ska använda komponenten
Använd multi-select när du har fler än sju alternativ och användaren ska kunna välja mer än ett av alternativen.
Etiketten
- Ska vara så tydlig att användaren förstår vad den ska fylla i utan en hjälptext.
- Ska nte innehålla förkortningar och tecken som till exempel snedstreck.
- Ska börja med stor bokstav.
- Avsluta inte med en punkt, även om etiketten består av mer än ett ord.
Alternativen
- Placera alternativen i en logisk ordning och lägg det mest valda alternativet överst.
- Om det finns många alternativ och namnen på alternativen är välkända. till exempel olika länder, är bokstavsordning bra.
- 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 minst en hundras.".
- Börja meningen med stor bokstav och sluta med punkt.
Alternativa komponenter
Komponent och kod
Komponenten driftsattes första gången i version 6.0.0. Komponenten kräver Javascript för att fungera.
Egenskap | Attribut | Beskrivning | Typ | Förvalt värde | |
|---|---|---|---|---|---|
disabled | disabled | Is multi-select disabled? | boolean | false | |
errorText | error-text | Feltext i multi-select. | string | - | |
errorTextRef | error-text-ref | Referens till en feltext som visas ifall "valid" är satt till "false". | string | - | |
helpTextRef | help-text-ref | Reference till hjälptext i multi-select. | string | - | |
extraClass | extra-class | Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2" | string | - | |
inputId | input-id | Id på komponenten. | string | - | |
label | label | label text. | string | - | |
open | open | Är multiselect open? | boolean | - | |
options | options | Lista av valbar alternativ. Om du skickar in en objektlista så förväntas det finnas ett attribut value som är det som visas i multi-selecten. Obs. måste föjla json format. | Object[] | string | string[] | - | |
optionsDisplayAttribute | options-display-attribute | Specificerar vilket attribut i options som ska visas upp i listan med valbara alternativ. OBS. endast aktuell om options är en lista med objekt. Om options är en lista med stängar kommer värdet på detta attribut att ignoreras. | string | 'value' | |
required | required | Är multiselect required? | boolean | false | |
| size | size | Storlek på komponenten, möjliga storlekar small och medium. | string | 'medium' | |
valid | valid | Är multiselect valid? | boolean | true | |
value | value | Lista med alla valda alternativ. Obs. måste föjla json format. | Object[] | string | string[] |
|
Angular
För att få multi-select att fungera med Angular FormControl och ngModel behöver du lägga in attributet ngDefaultControl som berättar för Angular att multi-select kan ses som en vanligt <input> element och kan då användas med ngModel och formControlName. Obs! Glöm inte att importera FormsModule eller ReactiveFormsModule när du använder ngModel resp. Formcontrol i din Angular modul.
<jv-multi-select ngDefaultControl formControlName="<Your formcontrolname>"
[options]="<Your options>" [value]="<Your formcontrol model>"
label="<Your label>">
</jv-multi-select>
Medium
<jv-multi-select options='[{"value":"Norge"},
{"value":"Danmark"},
{"value":"Finland"},
{"value":"Tyskland"},
{"value":"Frankrike"},
{"value":"Ryssland"},
{"value":"Polen"},
{"value":"Italien"},
{"value":"Storbritannien"},
{"value":"Spanien"},
{"value":"Ukraina"},
{"value":"Nederländerna"},
{"value":"Belgien"},
{"value":"Grekland"},
{"value":"Irland"},
{"value":"Portugal"},
{"value":"Island"}]' label="Vilka länder har du besökt det senaste året?">
</jv-multi-select>Small
<jv-multi-select size="small" options='[{"value":"Norge"},
{"value":"Danmark"},
{"value":"Finland"},
{"value":"Tyskland"},
{"value":"Frankrike"},
{"value":"Ryssland"},
{"value":"Polen"},
{"value":"Italien"},
{"value":"Storbritannien"},
{"value":"Spanien"},
{"value":"Ukraina"},
{"value":"Nederländerna"},
{"value":"Belgien"},
{"value":"Grekland"},
{"value":"Irland"},
{"value":"Portugal"},
{"value":"Island"}]' label="Vilka länder har du besökt det senaste året?">
</jv-multi-select>Obligatorisk
<jv-multi-select required="true" options='[{"value":"Norge"},
{"value":"Danmark"},
{"value":"Finland"},
{"value":"Tyskland"},
{"value":"Frankrike"},
{"value":"Ryssland"},
{"value":"Polen"},
{"value":"Italien"},
{"value":"Storbritannien"},
{"value":"Spanien"},
{"value":"Ukraina"},
{"value":"Nederländerna"},
{"value":"Belgien"},
{"value":"Grekland"},
{"value":"Irland"},
{"value":"Portugal"},
{"value":"Island"}]' label="Vilka länder har du besökt det senaste året?">
</jv-multi-select>Valideringsfel
<jv-multi-select required="true" valid="false" label="Vilka länder har du besökt det senaste året?" error-text="Välj minst ett land i listan" options='[{"value":"Norge"},
{"value":"Danmark"},
{"value":"Finland"},
{"value":"Tyskland"},
{"value":"Frankrike"},
{"value":"Ryssland"},
{"value":"Polen"},
{"value":"Italien"},
{"value":"Storbritannien"},
{"value":"Spanien"},
{"value":"Ukraina"},
{"value":"Nederländerna"},
{"value":"Belgien"},
{"value":"Grekland"},
{"value":"Irland"},
{"value":"Portugal"},
{"value":"Island"}]'>
</jv-multi-select>Statisk hjälptext
<jv-multi-select help-text-ref="helptext" options='[{"value":"Norge"},
{"value":"Danmark"},
{"value":"Finland"},
{"value":"Tyskland"},
{"value":"Frankrike"},
{"value":"Ryssland"},
{"value":"Polen"},
{"value":"Italien"},
{"value":"Storbritannien"},
{"value":"Spanien"},
{"value":"Ukraina"},
{"value":"Nederländerna"},
{"value":"Belgien"},
{"value":"Grekland"},
{"value":"Irland"},
{"value":"Portugal"},
{"value":"Island"}]' label="Vilka länder har du besökt det senaste året?">
<span slot="helptext" class="label__description">
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.
</span>
</jv-multi-select>Dynamisk hjälptext
<jv-multi-select help-text-ref="helptext" options='[{"value":"Norge"},
{"value":"Danmark"},
{"value":"Finland"},
{"value":"Tyskland"},
{"value":"Frankrike"},
{"value":"Ryssland"},
{"value":"Polen"},
{"value":"Italien"},
{"value":"Storbritannien"},
{"value":"Spanien"},
{"value":"Ukraina"},
{"value":"Nederländerna"},
{"value":"Belgien"},
{"value":"Grekland"},
{"value":"Irland"},
{"value":"Portugal"},
{"value":"Island"}]' label="Vilka länder har du besökt det senaste året?">
<jv-help-text slot="helptext"><span>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.
</span>
</jv-help-text>
</jv-multi-select>Inaktiverad
<jv-multi-select disabled="true" help-text-ref="helptext3" label="Vilka länder har du besökt det senaste året?" options='[{"value":"Norge"},
{"value":"Danmark"},
{"value":"Finland"},
{"value":"Tyskland"},
{"value":"Frankrike"},
{"value":"Ryssland"},
{"value":"Polen"},
{"value":"Italien"},
{"value":"Storbritannien"},
{"value":"Spanien"},
{"value":"Ukraina"},
{"value":"Nederländerna"},
{"value":"Belgien"},
{"value":"Grekland"},
{"value":"Irland"},
{"value":"Portugal"},
{"value":"Island"}]' value='["Norge"]'>
<jv-help-text slot="helptext3">
<span>
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.
</span>
</jv-help-text>
</jv-multi-select>Äldre variant av komponenten
Medium
<jv-multi-select-v1 label="Vilka länder har du besökt det senaste året?" size="medium"
error-text=""
error-text-ref=""
valid="true" help-text-ref="helptext" inputid="input1"
disabled="false" required="false" extra-class=""
options='"[\"Norge\",\"Danmark\",\"Finland\",\"Tyskland\",\"Frankrike\",\"Ryssland\",\"Polen\",\"Italien\",\"Storbritannien\",\"Spanien\",\"Ukraina\",\"Nederländerna\",\"Belgien\",\"Grekland\",\"Irland\",\"Portugal\",\"Island\"]"' value='"[\"Norge\"]"'>
</jv-multi-select-v1>Small
<jv-multi-select-v1 label="Vilka länder har du besökt det senaste året?" size="small"
error-text=""
error-text-ref="errortext"
valid="true" help-text-ref="helptext" inputid="input2"
disabled="false" required="false" extra-class=""
options='"[\"Norge\",\"Danmark\",\"Finland\",\"Tyskland\",\"Frankrike\",\"Ryssland\",\"Polen\",\"Italien\",\"Storbritannien\",\"Spanien\",\"Ukraina\",\"Nederländerna\",\"Belgien\",\"Grekland\",\"Irland\",\"Portugal\",\"Island\"]"' value='"[\"Norge\"]"'>
<span slot="errortext"></span>
</jv-multi-select-v1>Obligatorisk
<jv-multi-select-v1 label="Vilka länder har du besökt det senaste året?" size="medium"
error-text=""
error-text-ref="errortext"
valid="true" help-text-ref="helptext" inputid="input3"
disabled="false" required="true" extra-class=""
options='"[\"Norge\",\"Danmark\",\"Finland\",\"Tyskland\",\"Frankrike\",\"Ryssland\",\"Polen\",\"Italien\",\"Storbritannien\",\"Spanien\",\"Ukraina\",\"Nederländerna\",\"Belgien\",\"Grekland\",\"Irland\",\"Portugal\",\"Island\"]"' value='"[\"Norge\"]"'>
<span slot="errortext">Välj en bilaga</span>
</jv-multi-select-v1>Statisk hjälptext
<jv-multi-select-v1 label="Vilka länder har du besökt det senaste året?" size="medium"
error-text=""
error-text-ref=""
valid="true" help-text-ref="helptext" inputid="input4"
disabled="false" required="false" extra-class=""
options='"[\"Norge\",\"Danmark\",\"Finland\",\"Tyskland\",\"Frankrike\",\"Ryssland\",\"Polen\",\"Italien\",\"Storbritannien\",\"Spanien\",\"Ukraina\",\"Nederländerna\",\"Belgien\",\"Grekland\",\"Irland\",\"Portugal\",\"Island\"]"' value='"[\"Norge\"]"'>
<span class="label__description" 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.</span>
</jv-multi-select-v1>Dynamisk hjälptext
<jv-multi-select-v1 label="Vilka länder har du besökt det senaste året?" size="medium"
error-text=""
error-text-ref=""
valid="true" help-text-ref="helptext" inputid="input5"
disabled="false" required="false" extra-class=""
options='"[\"Norge\",\"Danmark\",\"Finland\",\"Tyskland\",\"Frankrike\",\"Ryssland\",\"Polen\",\"Italien\",\"Storbritannien\",\"Spanien\",\"Ukraina\",\"Nederländerna\",\"Belgien\",\"Grekland\",\"Irland\",\"Portugal\",\"Island\"]"' value='"[\"Norge\"]"'>
<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>
</jv-multi-select-v1>Valideringsfel
<jv-multi-select-v1 label="Vilka länder har du besökt det senaste året?" size="medium"
error-text="Välj minst ett land i listan"
error-text-ref=""
valid="false" help-text-ref="helptext" inputid="input6"
disabled="false" required="false" extra-class=""
options='"[\"Norge\",\"Danmark\",\"Finland\",\"Tyskland\",\"Frankrike\",\"Ryssland\",\"Polen\",\"Italien\",\"Storbritannien\",\"Spanien\",\"Ukraina\",\"Nederländerna\",\"Belgien\",\"Grekland\",\"Irland\",\"Portugal\",\"Island\"]"' value='"[\"Norge\"]"'>
<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>
</jv-multi-select-v1>Inaktiverad
<jv-multi-select-v1 label="Vilka länder har du besökt det senaste året?" size="medium"
error-text=""
error-text-ref="errortext"
valid="false" help-text-ref="helptext" inputid="input8"
disabled="true" required="true" extra-class=""
options='"[\"Norge\",\"Danmark\",\"Finland\",\"Tyskland\",\"Frankrike\",\"Ryssland\",\"Polen\",\"Italien\",\"Storbritannien\",\"Spanien\",\"Ukraina\",\"Nederländerna\",\"Belgien\",\"Grekland\",\"Irland\",\"Portugal\",\"Island\"]"' value='"[\"Norge\"]"'>
<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 minst ett land i listan</span>
</jv-multi-select-v1>Exempel
Senast publicerad
Sidansvarig för sidan är Styleguide