Styleguide

Bifoga fil

Du använder komponenten när du vill att användaren ska bifoga en fil.

Design och språk

Du ska ha en rubrik, det vill säga en etikett, ovanför komponenten så att användaren förstår vilken typ av fil du vill att hen ska bifoga. Rubriken kan till exempel vara Bifoga en fullmakt, eller Bifoga en faktura.

Hjälptext

Hjälptexten ska hjälpa användaren att välja rätt fil att bifoga.

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.

Komponent och kod

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

Parametrar på bifoga fil

Egenskap

Attribut

Beskrivning

Typ

Förvalt värde

disabled

disabled

Är Bifoga fil disabled?

boolean

false

errorText

error-text

Feltext för Bifoga fil

string

-

errorTextRef

error-text-ref

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

string

-

extraClass

extra-class

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

string

-

fleraFiler

flera-filer

Ska endast en eller flera filer kunna bifogas?

boolean

false

helpTextRef

help-text-ref

Referens till hjälptext i bifoga fil.

string

-

inputid

inputid

id på inputfältet

string

-

label

label

Text på label

string

-

required

required

Är Bifoga fil obligatoriskt?

boolean

false

valid

valid

Är Bifoga fil valid?

boolean

true

value

value

Kan användas för att hämta vilka filer som bifogats

any[]

-

Listener på bifoga fil

Event

Beskrivning

Type

valueChange

Change event som triggas när value ändras, i propertyn "detail" syns nya värdet på value.

CustomEvent<any[]>

Ladda upp en fil

HTML 
<jv-bifoga-fil label="Bifoga en fil" inputid="bf3">
  <input class="upload-area__input" type="file" name="files" id="bf3">
</jv-bifoga-fil>

Ladda upp flera filer

HTML 
<jv-bifoga-fil label="Bifoga flera filer">
  <input class="upload-area__input" type="file" name="files" id="bf4" multiple="">
</jv-bifoga-fil>

Statisk hjälptext

Lite hjälptext.
HTML 
<jv-bifoga-fil label="Bifoga en fil" help-text-ref="helptext">
  <span class="label__description" slot="helptext">Lite hjälptext.</span>
  <input class="upload-area__input" type="file" name="files" id="bf2" required="">
</jv-bifoga-fil>

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-bifoga-fil label="Bifoga en fil" 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>
  <input class="upload-area__input" type="file" name="files" id="bf1" required="">
</jv-bifoga-fil>

Valideringsfel

HTML 
<jv-bifoga-fil label="Bifoga en fil" error-text="Det krävs en bifogad fil." valid="false">
  <input class="upload-area__input" type="file" name="files" id="bf5" required="">
</jv-bifoga-fil>

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.
HTML 
<jv-bifoga-fil label="Bifoga en fil" help-text-ref="helptext" disabled="true">
  <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>
  <input class="upload-area__input" type="file" name="files" id="bg6" disabled="">
</jv-bifoga-fil>

Äldre version av bifoga fil

Exempel

Senast publicerad

Sidansvarig för sidan är Styleguide