Multitextfält

Använd ett multitextfält när användaren ska kunna ange flera fritextalternativ i samma fält.

Design och språk

När du ska använda komponenten

Du kan använda ett multitextfält när du vill att användaren ska kunna ange flera fritextalternativ och där det inte finns några förutbestämda alternativ att välja mellan.

Etiketten

  • Ska vara så tydlig så användaren förstår vad den ska fylla i 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 består av mer än ett ord.

Hjälptexter

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.

Formathjälp

Den här komponenten kan behöva en formathjälp för att användaren ska förstå hur den ska kunna fylla i mer än ett värde. Eftersom komponenten ska fungera både på dator och mobil så ska hjälptexten fungera oberoende av enhet. Försök att vara så specifik som möjligt i hjälptexten.

Exempel på text

Skriv: Använd kommatecken för att lägga till flera xxx.

Skriv inte: Använd kommatecken för att separera värden.

Felmeddelanden

  • Ska komma upp om fältet är obligatoriskt och användaren har missat att fylla i fältet.
  • Tonen ska vara trevlig och inte anklagande. Det är lämpligt att börja beskrivningen med "Fyll i…", till exempel "Fyll i dina önskemål."
  • Börja meningen med stor bokstav och sluta med punkt.
  • Användaren ska förstå hur den ska rätta till felet och inte bara att den ska rätta till felet.

Alternativa komponenter

Komponent och kod

Komponenten driftsattes första gången i version 7.0.0. Komponenten kräver Javascript för att fungera.

Komponenten multitextfält finns i storlekarna medium och small. Storleken small kan du använda om utrymmet på skärmen är begränsad.


Parametrar på multitext

Egenskap

Attribut

Beskrivning

Typ

Förvalt värde

disabled

disabled

Är multitext disabled?

boolean

false

errorText

error-text

Feltext i multitext.

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

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

-

required

required

Är multitext required?

boolean

false

size

size

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

string

'medium'

valid

valid

Är multitext valid?

boolean

true

value

value

lista med alla värden. Obs. måste föjla json format. 

string | string[]

-

Angular

För att få multitext att fungera med Angular FormControl och ngModel behöver du lägga in attributet ngDefaultControl som berättar för Angular att multitext 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-multitext ngDefaultControl formControlName="<Your fromcontrolname>" 
  [value]="<Your formcontrol model>" label="<Your label>">
</jv-multitext>

Medium

HTML
<jv-multitext label="Smeknamn"></jv-multitext>

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-multitext label="Smeknamn" size="small"></jv-multitext>

Obligatorisk

HTML
<jv-multitext label="Smeknamn" required="true"></jv-multitext>

Valideringsfel

HTML
<jv-multitext label="Smeknamn" required="true" valid="false" error-text="Fyll i minst ett smeknamn">
</jv-multitext>
HTML
<jv-multitext label="Smeknamn" required="true" valid="false" error-text="Fyll i minst ett smeknamn">
</jv-multitext>

Statisk hjälptext

Använd kommatecken för att lägga till flera smeknamn.
HTML
<jv-multitext label="Smeknamn" help-text-ref="helptext">
  <span slot="helptext" class="label__description">Använd kommatecken för att lägga till flera
    smeknamn.</span>
</jv-multitext>

Dynamisk hjälptext

Använd kommatecken för att lägga till flera smeknamn.
HTML
<jv-multitext label="Smeknamn" help-text-ref="helptext">
  <jv-help-text slot="helptext"><span>Använd kommatecken för att lägga till flera smeknamn.</span>
  </jv-help-text>
</jv-multitext>

Inaktiverad

HTML
<jv-multitext label="Smeknamn" disabled="true"></jv-multitext>

Ädre version av komponenten

Medium

HTML
<jv-multitext-v1 label="Smeknamn" size="medium"
    error-text=""
    error-text-ref=""
    valid="true"  help-text-ref="helptext" inputid="input1"
    disabled="false" required="false" extra-class=""
    value='Norge'>
</jv-multitext-v1>

Small

HTML
<jv-multitext-v1 label="Smeknamn" size="small"
    error-text=""
    error-text-ref="errortext"
    valid="true"  help-text-ref="helptext" inputid="input2"
    disabled="false" required="false" extra-class=""
    value='Norge'>
  
  <span slot="errortext"></span>
</jv-multitext-v1>

Obligatorisk

Välj en bilaga
HTML
<jv-multitext-v1 label="Smeknamn" size="medium"
    error-text=""
    error-text-ref="errortext"
    valid="true"  help-text-ref="helptext" inputid="input3"
    disabled="false" required="true" extra-class=""
    value='Norge'>
  
  <span slot="errortext">Välj en bilaga</span>
</jv-multitext-v1>

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.
HTML
<jv-multitext-v1 label="Smeknamn" size="medium"
    error-text=""
    error-text-ref=""
    valid="true"  help-text-ref="helptext" inputid="input4"
    disabled="false" required="false" extra-class=""
    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-multitext-v1>

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.
HTML
<jv-multitext-v1 label="Smeknamn" size="medium"
    error-text=""
    error-text-ref=""
    valid="true"  help-text-ref="helptext" inputid="input5"
    disabled="false" required="false" extra-class=""
    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-multitext-v1>

Valideringsfel

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.
HTML
<jv-multitext-v1 label="Smeknamn" size="medium"
    error-text="Fyll i minst ett smeknamn"
    error-text-ref=""
    valid="false"  help-text-ref="helptext" inputid="input6"
    disabled="false" required="false" extra-class=""
    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-multitext-v1>

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. Fyll i minst ett smeknamn
HTML
<jv-multitext-v1 label="Smeknamn" size="medium"
    error-text=""
    error-text-ref="errortext"
    valid="false"  help-text-ref="helptext" inputid="input8"
    disabled="true" required="true" extra-class=""
    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">Fyll i minst ett smeknamn</span>
</jv-multitext-v1>

Exempel

Senast publicerad

Sidansvarig för sidan är Styleguide