Checkboxar

Använd checkboxar när användaren kan välja ett eller flera av max sju alternativ.

Design och språk

  • Checkboxarna ska vara placerade under varandra.
  • Användaren ska kunna välja ett eller flera av max sju alternativ.
  • Användaren ska alltid kunna hitta ett alternativ som passar. Det kan innebära att du måste lägga till ett alternativ som till exempel "Vet ej" eller "Övrigt".
  • Placera alternativen i en logisk ordning och lägg det mest valda alternativet överst.
  • Undvik bokstavsordning om det inte är det mest logiska.

Texten på etiketten och alternativen

  • Ska vara kort och tydlig.
  • Ska 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 eller alternativen består av en mening. 

Hjälptexten

Hjälptexten ska hjälpa användaren att välja rätt alternativ.

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

Felmeddelanden

  • Är fältet obligatoriskt kan felmeddelandet vara "Välj minst ett av alternativen." om användaren inte har valt ett alternativ.

Alternativa komponenter

Komponent och kod

Komponenten checkboxar finns i två storlekar, large och medium. Storleken medium kan du använda om utrymmet på skärmen är begränsat.

Enskild checkbox

Parametrar på checkbox

Egenskap

Attribut

Beskrivning

Typ

Förvalt värde

errorText

error-text

Feltext som visas ifall "valid" är satt till "false".

string

-

helpTextRef

help-text-ref

Referens till hjälptext.

string

-

label

label

Label text.

string

-

size

size

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

string

'large'

valid

valid

Ska felmeddelande visas?

boolean

true


Large

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

Medium

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

Obligatorisk

<jv-checkbox label="Jag godkänner villkoren">
  <input id="checkbox_alone_required" required="" type="checkbox" name="Jag godkänner villkoren">
</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 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 id="checkbox_alone_statisk" type="checkbox" name="Jag godkänner villkoren">
</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 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 id="checkbox_alone_dynamisk" required="" type="checkbox" name="Jag godkänner villkoren">
</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 label="Jag godkänner villkoren" help-text-ref="helptext" error-text="Du måste acceptera vilkoren för att komma vidare" 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" type="checkbox" name="Jag godkänner villkoren">
</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 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 id="checkbox_alone_inaktiverad" disabled="" type="checkbox" name="Jag godkänner villkoren">
</jv-checkbox>

Checkboxgrupp

Parametrar på checkboxgrupp

Egenskap

Attribut

Beskrivning

Typ

Förvalt värde

disabled

disabled

Inaktiverad?

boolean

false

errorText

error-text

Feltext som visas ifall "valid" är satt till "false".

string

-

helpTextRef

help-text-ref

Referens till hjälptext.

string

-

legend

legend

Legend text.

string

-

required

required

Obligatorisk?

boolean

false

role

role

Sätter role attributet på fieldset, exempel på roller är "radiogroup" eller "group" för grupp av checkbox.

string

-

size

size

Storlek på komponent.

string

'large'

valid

valid

Ska felmeddelande visas?

boolean

true

Large

<jv-form-group legend="Välj ogräs">
  <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-form-group>

Medium

<jv-form-group legend="Välj ogräs" size="medium">
  <jv-checkbox label="Kirskål" size="medium">
    <input id="checkbox_group_medium_1" type="checkbox" name="Kirskål">
  </jv-checkbox>
  <jv-checkbox label="Maskros" size="medium">
    <input id="checkbox_group_medium_2" type="checkbox" name="Maskros">
  </jv-checkbox>
  <jv-checkbox label="Smörblomma" size="medium">
    <input id="checkbox_group_medium_3" type="checkbox" name="Smörblomma">
  </jv-checkbox>
</jv-form-group>

Obligatorisk

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

Valideringsfel

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

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-form-group legend="Välj ogräs" 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>
  <jv-checkbox label="Kirskål">
    <input id="checkbox_group_statisk1" type="checkbox" name="Kirskål">
  </jv-checkbox>
  <jv-checkbox label="Maskros">
    <input id="checkbox_group_statisk2" type="checkbox" name="Maskros">
  </jv-checkbox>
  <jv-checkbox label="Smörblomma">
    <input id="checkbox_group_statisk3" type="checkbox" name="Smörblomma">
  </jv-checkbox>
</jv-form-group>

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-form-group legend="Välj ogräs" help-text-ref="helptext" required="true">
  <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_dynamisk1" type="checkbox" name="Kirskål" required="">
  </jv-checkbox>
  <jv-checkbox label="Maskros">
    <input id="checkbox_group_dynamisk2" type="checkbox" name="Maskros">
  </jv-checkbox>
  <jv-checkbox label="Smörblomma">
    <input id="checkbox_group_dynamisk3" type="checkbox" name="Smörblomma">
  </jv-checkbox>
</jv-form-group>

Inaktiverad

<jv-form-group legend="Välj ogräs" disabled="true">
  <jv-checkbox label="Kirskål">
    <input id="checkbox_group_disabled1" type="checkbox" name="Kirskål" disabled="">
  </jv-checkbox>
  <jv-checkbox label="Maskros">
    <input id="checkbox_group_disabled2" type="checkbox" name="Maskros" disabled="">
  </jv-checkbox>
  <jv-checkbox label="Smörblomma">
    <input id="checkbox_group_disabled3" type="checkbox" name="Smörblomma" disabled="">
  </jv-checkbox>
</jv-form-group>

Endast HTML och CSS

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 till annan webbplats.

Senast publicerad 2021-05-27

Sidansvarig för sidan är Styleguide