Använd ett textfält när användaren ska fylla i en rad med text.
Använd ett textfält när användaren ska fylla i en rad med text.
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:
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.
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. |
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.
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..
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 |
<jv-dynamisk-input label="Förnamn">
<input autocomplete="given-name" id="input-text_large" type="text" name="Förnamn">
</jv-dynamisk-input>
<jv-dynamisk-input label="Förnamn" size="small">
<input autocomplete="given-name" id="input-text_medium" type="text" name="Förnamn">
</jv-dynamisk-input>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
Kräver JavaScript.
<jv-dynamisk-input label="Notering">
<input id="input-text-11" type="text" name="Notering" maxlength="50">
</jv-dynamisk-input>
<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>