Toggle

Webbkomponent

Här kan du läsa mer information om toggle som webbkomponent.

Medium

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

Small

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

Obligatorisk hjälptext

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

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

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

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

Valideringsfel i en slot

Du måste acceptera villkoren

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

Inaktiverad

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

Medium utan etikett

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