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

När du ska använda komponenten

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.

Etiketten

Ska 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 punkt även om etiketten består av en mening.

Hjälptext

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.

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
valid	valid	Flagga som kan användas för att styra ifall felmeddelande ska visas	boolean	true

Toggle

HTML

<jv-toggle label="Syntolkning"><input type="checkbox" name="test" id="toggle_large"></jv-toggle>

Obligatorisk

HTML

<jv-toggle label="Syntolkning"><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="Syntolkning" 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="Syntolkning" 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>

Inaktiverad

HTML

<jv-toggle label="Syntolkning">
  <input type="checkbox" name="test" disabled="" required="" id="toggle_disabled">
</jv-toggle>

Exempel

Här kan du se toggle användas i ett exempel

Senast publicerad 2025-05-09

Sidansvarig för sidan är Styleguide