Styleguide

Toggle

Använd en toggle när du vill att användaren ska kunna skifta mellan två lägen, som till exempel på och av.

Design och språk

Du kan använda en toggle när användaren ska kunna välja mellan två lägen som till exempel på och av och när valet inte ska sparas av användaren. Du ska inte använda en toggle när användaren till exempel ska acceptera ett villkor eller avtal. Då ska du istället använda en checkbox.

Texten på etiketten

  • Ska vara kort och tydlig.
  • 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 en mening.

Hjälptext

Hjälptexten ska hjälpa användaren att välja rätt av de två alternativen.

I första hand ska etiketten och alternativen vara tydliga 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.

Alternativa komponenter

Komponenter och kod

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

Parametrar på toggle

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

-

helpTextRef

help-text-ref

Referens till hjälptext

string

-

label

label

Label text

string

-

hideLabel

hide-label

Göm label

boolean

false

size

size

Storlek på komponenten, möjliga storlekar är 'medium' och 'small'

string

'medium'

valid

valid

Flagga som kan användas för att styra ifall felmeddelande ska visas

boolean

true

Medium

HTML 
<jv-toggle label="Jag godkänner villkoren"><input type="checkbox" name="test" id="toggle_large"></jv-toggle>

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-toggle label="Jag godkänner villkoren" size="small"><input type="checkbox" name="test" id="toggle_small"></jv-toggle>

Obligatorisk hjälptext

HTML 
<jv-toggle label="Jag godkänner villkoren"><input type="checkbox" name="test" required="" id="toggle_required">
</jv-toggle>

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-toggle label="Jag godkänner villkoren" help-text-ref="helptext">
  <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 type="checkbox" name="test" id="toggle_statisk">
</jv-toggle>

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-toggle label="Jag godkänner villkoren" help-text-ref="helptext">
  <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 type="checkbox" name="test" required="" id="toggle_dynamisk">
</jv-toggle>

Valideringsfel

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-toggle label="Jag godkänner villkoren" help-text-ref="helptext" valid="false" error-text="Du måste acceptera villkoren">
  <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 type="checkbox" name="test" required="" id="toggle_error">
</jv-toggle>

Inaktiverad

HTML 
<jv-toggle label="Jag godkänner villkoren">
  <input type="checkbox" name="test" disabled="" required="" id="toggle_disabled">
</jv-toggle>

Exempel

Senast publicerad

Sidansvarig för sidan är Styleguide