Du använder komponenten när du vill att användaren ska bifoga en fil.
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ä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:
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.
Komponenten driftsattes första gången i version 10.0.0. Denna 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[]> |
<jv-bifoga-fil label="Bifoga en fil" inputid="bf3">
<input class="upload-area__input" type="file" name="files" id="bf3">
</jv-bifoga-fil>
<jv-bifoga-fil label="Bifoga flera filer">
<input class="upload-area__input" type="file" name="files" id="bf4" multiple="">
</jv-bifoga-fil>
<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>
<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>
<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>
<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>
Senast publicerad
Sidansvarig för sidan är Styleguide