Multi-select

Använd multi-select när användaren kan välja mer än ett av minst åtta alternativ.

Design och språk

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.

Texten på etiketten och alternativen

  • Ska vara kort.
  • Ska helst vara så tydlig att användaren förstår vad den ska fylla i utan 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 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.

Alternativa komponenter

Komponent och kod

Komponenten multi-select finns i storlekarna large och medium.

Denna komponent kräver Javascript för att fungera.


Parametrar på multi-select

Egenskap

Attribut

Beskrivning

Typ

Förvalt värde

disabled

disabled

Is multi-select disabled?

boolean

false

errorText

error-text

Feltext i multi-select.

string

-

helpTextRef

help-text-ref

Reference till hjälptext i multi-select.

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.

Object[] | string | string[]

-

required

required

Är multiselect required?

boolean

false

size


size

Storlek på komponenten, möjliga storlekar medium och large.

string

'large'

valid

valid

Är multiselect valid?

boolean

true

value

value

Lista med alla valda alternativ.

Object[] | string | string[]

new Array()

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>

Large

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

Medium

<jv-multi-select size="medium" 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

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

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

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-multi-select help-text-ref="helptext" disabled="true" value="['Norge']" 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">
    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>

Äldre version av multi-select

Senast publicerad

Sidansvarig för sidan är Styleguide