Styleguide

Datumfält

Använd ett datumfält när användaren ska fylla i ett datum.

Design och språk

När du ska använda komponenten

Använd ett datumfält när användaren ska fylla i ett datum.

Etiketten

Texten på rubriken, det vill säga etiketten, ska vara tydlig så att användaren förstår vilket datum den ska fylla i.

Hjälptexter

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, 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.
  • 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.

Formathjälp

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.

Felmeddelanden

  • Ska komma upp när användaren har missat att fylla i fältet eller fyllt i fältet i fel format.
  • Användaren ska förstå hur den ska rätta till felet och inte bara att den ska rätta till felet.
  • Tonen ska vara trevlig och inte anklagande. Det är lämpligt att börja beskrivningen med "Fyll i…"
  • Börja meningen med stor bokstav och avsluta med en punkt.

Komponent och kod

Komponenten driftsattes första gången i version 1.0.0.

Parametrar på datumfält

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

Medium

HTML 
<jv-dynamisk-input label="Utbetalningsdatum">
  <input autocomplete="off" max="2500-12-30" id="input-date-1" type="date" name="text1">
</jv-dynamisk-input>

Small

Storleken small innehåller buggar i ios på små skärmar. Du bör därför använda medium varianten för små skärmar.

HTML 
<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>

Obligatorisk

HTML 
<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>

Valideringsfel

HTML 
<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>

Statisk 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.
HTML 
<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>

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.
HTML 
<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>

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.
HTML 
<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>

Endast HTML och CSS

Exempel

Senast publicerad

Sidansvarig för sidan är Styleguide