Bifoga fil
Du använder komponenten när du vill att användaren ska bifoga en eller flera filer.
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älptexter
Hjälptexten ska hjälpa användaren att bifoga rätt.
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. Komponent kräver Javascript för att fungera.
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[] | - |
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
<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
<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
<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
<jv-bifoga-fil label="Bifoga en bilaga" help-text-ref="helptext">
<jv-help-text slot="helptext">Namnge din bilaga med ett namn som överenstä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
<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
<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