Använd ett datumfält när användaren ska fylla i ett datum.
Hjälptexten ska hjälpa användaren att fylla i rätt datum i fältet.
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.
Använd ingen formathjälp för datumfält. Eftersom respektive webbläsare kommer att presentera formathjälpen i en placeholder, det vill säga i fältet, ska vi inte skriva en formathjälp ovanför. Om vi hade skrivit en formathjälp skulle det kunna bli så att vi efterfrågar ett format och webbläsaren en annat. För att underlätta för användaren skriver vi därför ingen formathjälp.
Komponenten driftsattes första gången i version 1.0.0.
Egenskap | Attribut | Beskrivning | Typ | Förvalt värde |
---|---|---|---|---|
errorText | error-text | Feltext som visas ifall "valid" är satt till "false". | string | - |
errorTextRef | error-text-ref | Referens till en feltext som visas ifall "valid" är satt till "false". | string | - |
formatText | format-text | Text som beskriver förmatet i vilket inmatningsfältet ska fyllas i med. | string | - |
extraClass | extra-class | Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2" | string | - |
helpTextRef | help-text-ref | Referens till hjälptext. | string | - |
hideTextCounter | hide-text-counter | Kan sättas ifall man vill dölja teckenräknaren. Kan avändas om man vill sätta maxlength men inte vill visa teckenräknaren. | boolean | false |
label | label | Label text. | string | - |
size | size | Storlek på komponenten, möjliga storlekar är 'medium' och 'small'. | string | 'medium' |
valid | valid | Dafualt så används inmatningsfältet inbyggda validering. Detta kan overridas med valid attributet om man själv vill styra om inmatningsfältet är valid. | boolean | null |
<jv-dynamisk-input label="Utbetalningsdatum">
<input autocomplete="off" max="2500-12-30" id="input-date-1" type="date" name="text1">
</jv-dynamisk-input>
<jv-dynamisk-input label="Utbetalningsdatum" size="small">
<input autocomplete="off" max="2500-12-30" id="input-date-medium" type="date" name="text1">
</jv-dynamisk-input>
<jv-dynamisk-input label="Utbetalningsdatum" error-text="Fyll i ett datum.">
<input autocomplete="off" max="2500-12-30" id="input-date-required" required="" type="date" name="text1">
</jv-dynamisk-input>
<jv-dynamisk-input label="Utbetalningsdatum" error-text="Fyll i ett datum." valid="false">
<input autocomplete="off" max="2500-12-30" id="input-date-error" required="" type="date" name="text1">
</jv-dynamisk-input>
<jv-dynamisk-input label="Utbetalningsdatum" help-text-ref="helptext" error-text="Fyll i ett datum.">
<span slot="helptext" class="label__description">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>
<input autocomplete="off" max="2500-12-30" id="input-date-webbkomp_statisk" type="date" name="text1">
</jv-dynamisk-input>
<jv-dynamisk-input label="Utbetalningsdatum" help-text-ref="helptext" error-text="Fyll i ett datum.">
<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 autocomplete="off" max="2500-12-30" id="input-date-webbkomp" type="date" name="text1">
</jv-dynamisk-input>
<jv-dynamisk-input label="Utbetalningsdatum" help-text-ref="helptext" error-text="Fyll i ett datum.">
<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 autocomplete="off" max="2500-12-30" id="input-date-disabled" disabled="" type="date" name="text1">
</jv-dynamisk-input>
Senast publicerad
Sidansvarig för sidan är Styleguide