Styleguide

Bifoga fil

Du använder komponenten när du vill att användaren ska bifoga en eller flera filer.

Design och språk

När du ska använda komponenten

Du använder komponenten när du vill att användaren ska bifoga en eller flera filer.

Etiketten

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

Hjälptexten ska hjälpa användaren att bifoga rätt filer.

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.
  • Var så konkret som möjligt.
  • 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.

Felmeddelande

  • Ska komma upp när användaren missat att bifoga en fil i det fall fältet är obligatoriskt.
  • Tonen ska vara trevlig och inte anklagande. Det är lämpligt att börja beskrivningen med "Bifoga en ...", till exempel "Bifoga en faktura.".
  • Börja meningen med stor bokstav och avsluta med en punkt.

Komponent och kod

Komponenten driftsattes första gången i version 10.0.0. 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[]>

Bifoga en fil

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

Bifoga flera filer

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

Statisk hjälptext

Max storlek 500kb
HTML 
<jv-bifoga-fil label="Bifoga en bilaga" help-text-ref="helptext">
  <span class="label__description" slot="helptext">Max storlek 500kb</span>
  <input class="upload-area__input" type="file" name="files" id="bf2" required="">
</jv-bifoga-fil>

Dynamisk hjälptext

Ge din bilaga ett namn som stämmer med innehållet, till exempel Karta.pdf
HTML 
<jv-bifoga-fil label="Bifoga en bilaga" help-text-ref="helptext">
  <jv-help-text slot="helptext">Ge din bilaga ett namn som stämmer med innehållet, till exempel Karta.pdf
  </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 bilaga" error-text="Välj en bilaga." valid="false">
  <input class="upload-area__input" type="file" name="files" id="bf5" required="">
</jv-bifoga-fil>

Inaktiverad

Namnge din bilaga med ett namn som överenstämmer med innehållet, till exempel Karta.pdf
HTML 
<jv-bifoga-fil label="Bifoga en bilaga" help-text-ref="helptext" disabled="true">
  <jv-help-text slot="helptext"><span>Namnge din bilaga med ett namn som överenstämmer med innehållet, till exempel Karta.pdf
    </span>
  </jv-help-text>
  <input class="upload-area__input" type="file" name="files" id="bg6" disabled="">
</jv-bifoga-fil>

Exempel

Senast publicerad

Sidansvarig för sidan är Styleguide