Styleguide

Textyta

Använd en textyta när användaren ska fylla i en större mängd text som sträcker sig över flera rader.

Design och språk

Storleken på fältet

Låt storleken på fältet indikera för användaren hur mycket text du vill att den ska skriva. Vill du ha mycket information ska du ha ett stort fält och förväntar du dig lite information ska du ha ett litet fält.

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

Felmeddelanden

  • Ska komma upp om fältet är obligatoriskt och användaren har missat att fylla i fältet.
  • Tonen ska vara trevlig och inte anklagande. Det är lämpligt att börja beskrivningen med "Fyll i…"
  • Användaren ska förstå hur den ska rätta till felet och inte bara att den ska rätta till felet.

Komponent och kod

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

Du kan ändra den initiala höjden på textytan genom att ändra attributet "rows" som anger hur många rader textarean ska ha initialt.

Om du sätter maxlength på textytan så aktiveras character count. Då kan man se hur många tecken fältet tar och hur många tecken som är inmatade.

Parametrar på textyta

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

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

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="Kommentar">
  <textarea id="textarea_large" name="Kommentar" rows="3" wrap="soft" maxlength="200"></textarea>
</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="Kommentar" size="small">
  <textarea id="textarea_medium" name="Kommentar" rows="3" wrap="soft" maxlength="200"></textarea>
</jv-dynamisk-input>

Obligatorisk

HTML 
<jv-dynamisk-input label="Kommentar" error-text="Skriv en kommentar.">
  <textarea id="textarea_required" name="Kommentar" required="" rows="3" wrap="soft" maxlength="200"></textarea>
</jv-dynamisk-input>

Valideringsfel

HTML 
<jv-dynamisk-input label="Kommentar" error-text="Skriv en kommentar." valid="false">
  <textarea id="textarea_error" name="Kommentar" required="" rows="3" wrap="soft" maxlength="200"></textarea>
</jv-dynamisk-input>

Statisk hjälptext

Skriv en kort kommentar. Kommentarer kommer att tas bort när ärendet avslutas.
HTML 
<jv-dynamisk-input label="Kommentar" help-text-ref="helptext">
  <span slot="helptext" class="label__description">Skriv en kort kommentar. Kommentarer kommer att tas bort när ärendet avslutas.
  </span>
  <textarea id="textarea_statisk" name="Kommentar" rows="3" wrap="soft" maxlength="200"></textarea>
</jv-dynamisk-input>

Dynamisk hjälptext

Skriv en kort kommentar. Kommentarer kommer att tas bort när ärendet avslutas.
HTML 
<jv-dynamisk-input label="Kommentar" help-text-ref="helptext" error-text="Skriv en kommentar.">
  <jv-help-text slot="helptext">Skriv en kort kommentar. Kommentarer kommer att tas bort när ärendet avslutas.
  </jv-help-text>
  <textarea id="textarea_dynamisk" name="Kommentar" required="" rows="3" wrap="soft" maxlength="200"></textarea>
</jv-dynamisk-input>

Textyta som inte är redigeringsbar

Skriv en kort kommentar. Kommentarer kommer att tas bort när ärendet avslutas.
HTML 
<jv-dynamisk-input label="Kommentar" help-text-ref="helptext" error-text="Skriv en kommentar.">
  <jv-help-text slot="helptext">Skriv en kort kommentar. Kommentarer kommer att tas bort när ärendet avslutas.
  </jv-help-text>
  <textarea id="textarea_readonly" name="Kommentar" readonly="" rows="3" wrap="soft">              Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala 
              tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir 
              utvecklingen mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.
            </textarea>
</jv-dynamisk-input>

Inaktiverad

HTML 
<jv-dynamisk-input label="Kommentar" >
  <textarea id="textarea_disabeld" name="Kommentar" rows="3" wrap="soft" disabled></textarea>
</jv-dynamisk-input>

Gömd teckenräknare

HTML 
<jv-dynamisk-input error-text="Skriv en kommentar." label="Kommentar" hide-text-counter="true">
  <textarea id="textarea_teckenraknare" maxlength="200" name="Kommentar" required="" rows="3" wrap="soft"></textarea>
</jv-dynamisk-input>

Endast HTML och CSS

Exempel

Senast publicerad

Sidansvarig för sidan är Styleguide