Styleguide

Textfält

Använd ett textfält när användaren ska fylla i en rad med text.

Design och språk

Texten på etiketter

  • Ska vara kort.
  • Ska helst vara så tydlig så användaren förstår vad den ska fylla i utan att du behöver ha en hjälptext.
  • Ska inte innehålla förkortningar och tecken, som till exempel snedstreck.
  • Ska börja med stor bokstav. Avsluta inte med en punkt, även om etiketten består av mer än ett ord.

Hjälptext

Hjälptexten ska hjälpa användaren att fylla i rätt information 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:

  • 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 förstå användarens behov.

Formathjälp

Ge formathjälp om det är viktigt att användaren fyller i fältet i ett speciellt format.

Formathjälpen ligger ovanför fältet så att den syns även när användaren har börjat fylla i fältet, du ska alltså inte använda en så kallad placeholder för formathjälpen. Du ska inte heller placera formathjälpen som en hjälptext.

Felmeddelanden

  • Meddelandet ska komma upp när användaren antingen har missat att fylla i ett obligatoriskt fält eller när den har fyllt i informationen i fel format.
  • I de fall fältet har formathjälp ska felmeddelandet inte innehålla samma information som formathjälpen.
  • Meddelandet ska hjälpa användaren att förstå hur den ska göra för att rätta till felet. Det ska alltså inte bara stå att något är fel utan även ge tydlig information om vad användaren kan göra för att rätta till felet.
  • Tonen ska vara trevlig och inte anklagande.

Textfält med förutbestämd text

Textfält med fasta texter

Etikett

Formathjälp

Felmeddelande

Förnamn

Behövs inte

 Fyll i förnamnet.

Efternamn

Behövs inte

Fyll i efternamnet.

Personnummer

10 siffror

Fyll i personnumret med år, månad, dag och dina fyra kontrollsiffor.

Födelsedatum

ÅÅMMDD

Fyll i födelsedatumet i med år, månad och dag.

Organisationsnummer


Fyll i organisationsnumret med 10 siffor.

Personnummer eller organisationsnummer alt. Person-/organisationsnummer

10 siffror

Fyll i personnumret med år, månad, dag och dina fyra kontrollsiffror eller organisationsnumret med 10 siffror.

Mobil

Behövs inte om du har kodat förlåtande. Om du ställer krav på användaren att skriva i ett visst format kan du till exempel skriva:

Till exempel 079-999999

Fyll i mobilnumret.

Telefon

Behövs inte om du har kodat förlåtande. Om du ställer krav på användaren att skriva i ett visst format kan du till exempel skriva: Till exempel 099-999999

Fyll i telefonnumret.

Gatuadress

Behövs inte

Fyll gatuadressen inklusive gatunummer eller postbox.

Utdelningsadress

Behövs inte

Fyll i utdelningsadressen, till exempel gatuadressen med gatunummer eller postbox.

Postnummer

Behövs inte

Fyll i postnumret med fem siffror.

Postort

Behövs inte

Fyll i postorten.

E-post


Fyll i e-postadressen i rätt format.

C/o adress

Behövs inte

Behövs inte eftersom fältet aldrig kan vara obligatoriskt.

Anläggningsnummer

SE XXXXXX

Fyll i anläggningsnumret i rätt format.

Alternativa komponenter

Komponenter och kod

Komponenten driftsattes första gången i version 1.0.0. Komponenten textfält finns i storlekarna medium och small. Storleken small kan du använda om utrymmet på skärmen är begränsad.

Glöm inte att uppdatera alla "id" på inmatningsfältet eftersom de måste vara unika.

Autocomplete

Attributet "autocomplete" ska anges på textfält för att specificera för webbläsaren vilken typ av information som ska fyllas i. På så vis kan webbläsaren ge förslag på vad som ska stå i textfältet baserat värden som har fyllts i tidigare. Här finns en lista på de värden värden som kan anges i autocomplete Länk till annan webbplats, öppnas i nytt fönster..


Parametrar på textfä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

-

extraClass

extra-class

Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2"

string

-

formatText

format-text

Text som beskriver formatet i vilket inmatningsfältet ska fyllas i med.

string

-

formatTextRef

format-text-ref

Referens till ett HTML-element med text som beskriver formatet.

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

Default 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="Förnamn">
  <input autocomplete="given-name" id="input-text_large" type="text" name="Förnamn">
</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="Förnamn" size="small">
  <input autocomplete="given-name" id="input-text_medium" type="text" name="Förnamn">
</jv-dynamisk-input>

Obligatorisk

HTML 
<jv-dynamisk-input label="Förnamn" error-text="Fyll i förnamnet.">
  <input autocomplete="given-name" required="" id="input-text_required" type="text" name="Förnamn">
</jv-dynamisk-input>

Valideringsfel

HTML 
<jv-dynamisk-input label="Förnamn" error-text="Fyll i förnamnet." valid="false">
  <input autocomplete="given-name" required="" id="input-text_error" type="text" name="Förnamn">
</jv-dynamisk-input>

Formattext

HTML 
<jv-dynamisk-input format-text="SE XXXXXX" label="Anläggningsnummer">
  <input autocomplete="given-name" id="input-formattext" name="Förnamn" value="SE " required="" type="text">
</jv-dynamisk-input>

Formattext i en slot

SE XXXXXX
HTML 
<jv-dynamisk-input format-text-ref="formattext" label="Anläggningsnummer">
  <input autocomplete="given-name" id="input-formattext_slot" name="Förnamn" value="SE " required="" type="text">
  <span slot="formattext">SE XXXXXX</span>
</jv-dynamisk-input>

Statisk hjälptext

Förnamn är våra individuella namn som vi oftast får vid födseln. Du kan ha flera förnamn men ett av dem används vanligen vid tilltal i vardagliga situationer.
HTML 
<jv-dynamisk-input label="Förnamn" help-text-ref="helptext" error-text="Fyll i förnamnet.">
  <span slot="helptext" class="label__description">Förnamn är våra individuella namn som vi oftast får vid födseln. Du kan ha flera förnamn men ett av dem används vanligen vid tilltal i vardagliga situationer.
  </span>
  <input autocomplete="given-name" id="input-text-helptext-statisk-large" type="text" name="text2">
</jv-dynamisk-input>

Dynamisk hjälptext

Förnamn är våra individuella namn som vi oftast får vid födseln. Du kan ha flera förnamn men ett av dem används vanligen vid tilltal i vardagliga situationer.
HTML 
<jv-dynamisk-input label="Förnamn" help-text-ref="helptext" error-text="Fyll i förnamnet.">
  <jv-help-text slot="helptext">Förnamn är våra individuella namn som vi oftast får vid födseln. Du kan ha flera förnamn men ett av dem används vanligen vid tilltal i vardagliga situationer.
  </jv-help-text>
  <input autocomplete="given-name" required="true" id="input-text-helptext-dynamisk-large" type="text" name="Förnamn">
</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="Förnamn" help-text-ref="helptext" error-text="Fyll i förnamnet.">
  <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="given-name" disabled="" required="true" id="input-text-helptext-disabled" type="text" name="Förnamn">
</jv-dynamisk-input>

Lösenord

HTML 
<jv-dynamisk-input label="Lösenord">
  <input autocomplete="off" type="password" id="input-password-1" type="text" min="0" required="" name="Lösenord">
</jv-dynamisk-input>

Inmatningsfält med teckenräknare

Kräver JavaScript.

HTML 
<jv-dynamisk-input label="Notering">
  <input  id="input-text-11" type="text" name="Notering" maxlength="50">
</jv-dynamisk-input>

Gömd teckenräknare

HTML 
<jv-dynamisk-input error-text="Fyll i förnamnet." label="Förnamn" hide-text-counter="true">
  <input autocomplete="given-name" maxlength="50" id="input-text-helptext-disabled" name="Förnamn" required="" type="text">
</jv-dynamisk-input>

Endast HTML och CSS

Exempel

Senast publicerad

Sidansvarig för sidan är Styleguide