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

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

-

fleraFiler

flera-filer

Ska endast en eller flera filer kunna bifogas?

boolean

false

helpTextRef

help-text-ref

Reference till hjälptext i bifoga fil.

string

-

label

label

label text.

string

-

required

required

Är bifoga fil required?

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

-

Ladda upp en fil

<jv-bifoga-fil label="Bifoga en fil"></jv-bifoga-fil>

Ladda upp flera filer

<jv-bifoga-fil label="Bifoga flera filer" flera-filer="true"></jv-bifoga-fil>

Statisk hjälptext

Lite hjälptext.
<jv-bifoga-fil label="Bifoga en fil" required="true" help-text-ref="helptext">
  <span class="label__description" slot="helptext">Lite hjälptext.</span>
</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.
<jv-bifoga-fil label="Bifoga en fil" required="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>
</jv-bifoga-fil>

Valideringsfel

<jv-bifoga-fil label="Bifoga en fil" required="true" error-text="Det krävs en bifogad fil." valid="false">
</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.
<jv-bifoga-fil label="Välj 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>
</jv-bifoga-fil>

Äldre version av bifoga fil

Senast publicerad

Sidansvarig för sidan är Styleguide