Checkboxar

Webbkomponent

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

Enskild checkbox

Medium

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

Small

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

Obligatorisk

<jv-checkbox label="Jag godkänner villkoren">
  <input id="checkbox_alone_required" name="Jag godkänner villkoren" required="" type="checkbox">
</jv-checkbox>

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-checkbox 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="checkbox_alone_statisk" name="Jag godkänner villkoren" type="checkbox">
</jv-checkbox>

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-checkbox 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="checkbox_alone_dynamisk" name="Jag godkänner villkoren" required="" type="checkbox">
</jv-checkbox>

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-checkbox error-text="Du måste acceptera vilkoren för att komma vidare" 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="checkbox_alone_error" name="Jag godkänner villkoren" required="" type="checkbox">
</jv-checkbox>

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-checkbox 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="" checked="" id="checkbox_alone_inaktiverad" name="Jag godkänner villkoren" type="checkbox">
</jv-checkbox>

Checkboxgrupp

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

Medium

<jv-fieldset legend="Välj ogräs" fieldsetid="group1">
  <jv-checkbox label="Kirskål">
    <input id="checkbox_group1" type="checkbox" name="Kirskål">
  </jv-checkbox>
  <jv-checkbox label="Maskros">
    <input id="checkbox_group2" type="checkbox" name="Maskros">
  </jv-checkbox>
  <jv-checkbox label="Smörblomma">
    <input id="checkbox_group3" type="checkbox" name="Smörblomma">
  </jv-checkbox>
</jv-fieldset>

Small

<jv-fieldset legend="Välj ogräs" size="small" fieldsetid="group2">
  <jv-checkbox label="Kirskål" size="small">
    <input id="checkbox_group_medium_1" type="checkbox" name="Kirskål">
  </jv-checkbox>
  <jv-checkbox label="Maskros" size="small">
    <input id="checkbox_group_small_2" type="checkbox" name="Maskros">
  </jv-checkbox>
  <jv-checkbox label="Smörblomma" size="small">
    <input id="checkbox_group_small_3" type="checkbox" name="Smörblomma">
  </jv-checkbox>
</jv-fieldset>

Obligatorisk

<jv-fieldset legend="Välj ogräs" required="true" fieldsetid="group3">
  <jv-checkbox label="Kirskål">
    <input id="checkbox_group_obligatorisk1" name="Kirskål" type="checkbox">
  </jv-checkbox>
  <jv-checkbox label="Maskros">
    <input id="checkbox_group_obligatorisk2" name="Maskros" type="checkbox">
  </jv-checkbox>
  <jv-checkbox label="Smörblomma">
    <input id="checkbox_group_obligatorisk3" name="Smörblomma" type="checkbox">
  </jv-checkbox>
</jv-fieldset>

Valideringsfel

<jv-fieldset error-text="Välj minst ett av alternativen" legend="Välj ogräs" required="true" valid="false" fieldsetid="group4">
  <jv-checkbox label="Kirskål">
    <input id="checkbox_group_error1" name="Kirskål" type="checkbox">
  </jv-checkbox>
  <jv-checkbox label="Maskros">
    <input id="checkbox_group_error2" name="Maskros" type="checkbox">
  </jv-checkbox>
  <jv-checkbox label="Smörblomma">
    <input id="checkbox_group_error3" name="Smörblomma" type="checkbox">
  </jv-checkbox>
</jv-fieldset>

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-fieldset help-text-ref="helptext" legend="Välj ogräs" fieldsetid="group5">
  <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>
  <jv-checkbox label="Kirskål">
    <input id="checkbox_group_statisk1" name="Kirskål" type="checkbox">
  </jv-checkbox>
  <jv-checkbox label="Maskros">
    <input id="checkbox_group_statisk2" name="Maskros" type="checkbox">
  </jv-checkbox>
  <jv-checkbox label="Smörblomma">
    <input id="checkbox_group_statisk3" name="Smörblomma" type="checkbox">
  </jv-checkbox>
</jv-fieldset>

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-fieldset help-text-ref="helptext" legend="Välj ogräs" fieldsetid="group_dynamisk">
  <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>
  <jv-checkbox label="Kirskål">
    <input id="checkbox_group_dynamisk12" name="Kirskål" type="checkbox">
  </jv-checkbox>
  <jv-checkbox label="Maskros">
    <input id="checkbox_group_dynamisk22" name="Maskros" type="checkbox">
  </jv-checkbox>
  <jv-checkbox label="Smörblomma">
    <input id="checkbox_group_dynamisk32" name="Smörblomma" type="checkbox">
  </jv-checkbox>
</jv-fieldset>

Dynamisk hjälptext med 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-fieldset help-text-ref="helptext" error-text="Välj minst ett av alternativen" valid="false" legend="Välj ogräs" fieldsetid="group_dynamisk">
  <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>
  <jv-checkbox label="Kirskål">
    <input id="checkbox_group_dynamisk2" name="Kirskål" type="checkbox">
  </jv-checkbox>
  <jv-checkbox label="Maskros">
    <input id="checkbox_group_dynamisk2" name="Maskros" type="checkbox">
  </jv-checkbox>
  <jv-checkbox label="Smörblomma">
    <input id="checkbox_group_dynamisk3" name="Smörblomma" type="checkbox">
  </jv-checkbox>
</jv-fieldset>

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-fieldset disabled="true" size="medium" help-text-ref="helptext" legend="Välj ogräs" fieldsetid="group7">
  <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>
  <jv-checkbox label="Kirskål">
    <input id="checkbox_group_disabled1" checked="" name="Kirskål" type="checkbox">
  </jv-checkbox>
  <jv-checkbox label="Maskros">
    <input id="checkbox_group_disabled2" name="Maskros" type="checkbox">
  </jv-checkbox>
  <jv-checkbox label="Smörblomma">
    <input id="checkbox_group_disabled3" name="Smörblomma" type="checkbox">
  </jv-checkbox>
</jv-fieldset>

Endast HTML och CSS

Här hittar du checkboxar utan JavaScript

Checkboxgrupp med textfält

För att se exemplet på en checkboxgrupp kombinerade med textfält kan du kolla i våran exempelsida på en e-tjänstlänk.