Använd en toggle när du vill att användaren ska kunna skifta mellan två lägen, som till exempel på och av.
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.
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:
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.
Komponenten driftsattes första gången i version 15.1.4.
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 |
<jv-toggle label="Jag godkänner villkoren"><input type="checkbox" name="test" id="toggle_large"></jv-toggle>
<jv-toggle label="Jag godkänner villkoren" size="small"><input type="checkbox" name="test" id="toggle_small"></jv-toggle>
<jv-toggle label="Jag godkänner villkoren"><input type="checkbox" name="test" required="" id="toggle_required">
</jv-toggle>
<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>
<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>
<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>
<jv-toggle label="Jag godkänner villkoren">
<input type="checkbox" name="test" disabled="" required="" id="toggle_disabled">
</jv-toggle>
Senast publicerad
Sidansvarig för sidan är Styleguide