Styleguide

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älptexter

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

  • Ska komma upp när användaren missat att välja ett alternativ i de fall fältet är obligatoriskt.
  • Tonen ska vara trevlig och inte anklagande. Det är lämpligt att börja beskrivningen med "Välj...", till exempel "Välj en eller flera hundraser.".

Alternativa komponenter

Komponent och kod

Komponenten driftsattes första gången i version 1.0.0. Komponenten checkboxar finns i två storlekar, medium och small. Storleken small 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

-

errorTextRef

error-text-ref

Referens till en feltext som visas ifall "valid" är satt till "false".

string

-

helpTextRef

help-text-ref

Referens till hjälptext.

string

-

extraClass

extra-class

Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2"

string

-

label

label

Label text.

string

-

hideLabel

hide-label

Gömma label.

boolean

false

size

size

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

string

'medium'

valid

valid

Ska felmeddelande visas?

boolean

true


Medium

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

Small

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

Obligatorisk

HTML 
<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

När du godkänner villkoren kommer du att få ta del av föreningens alla tips.
HTML 
<jv-checkbox label="Jag godkänner villkoren" help-text-ref="helptext">
  <span slot="helptext" class="label__description">
    När du godkänner villkoren kommer du att få ta del av föreningens alla tips.
  </span>
  <input id="checkbox_alone_statisk" type="checkbox" name="Jag godkänner villkoren">
</jv-checkbox>

Dynamisk hjälptext

När du godkänner villkoren kommer du att få ta del av föreningens alla tips.
HTML 
<jv-checkbox label="Jag godkänner villkoren" help-text-ref="helptext">
  <jv-help-text slot="helptext">När du godkänner villkoren kommer du att få ta del av föreningens alla tips.
  </jv-help-text>
  <input id="checkbox_alone_dynamisk" required="" type="checkbox" name="Jag godkänner villkoren">
</jv-checkbox>

Valideringsfel

När du godkänner villkoren kommer du att få ta del av föreningens alla tips.
HTML 
<jv-checkbox label="Jag godkänner villkoren" help-text-ref="helptext" error-text="Du måste godkänna villkoren för att komma vidare" valid="false">
  <jv-help-text slot="helptext">När du godkänner villkoren kommer du att få ta del av föreningens alla tips.
  </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.
HTML 
<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>

Medium utan etikett

Ibland behöver man ha checkboxar utan synlig etikett, till exempel i en tabell. Det är dock viktigt att du anger en etikett i koden eftersom den kommer läsas upp av skärmläsare.

HTML 
<jv-checkbox extra-class="c-checkbox--inline-text" label="Jag godkänner villkoren" hide-label="true">
  <input id="checkbox_alone_empty_label" name="Jag godkänner villkoren" type="checkbox">
</jv-checkbox>

Checkboxgrupp

Parametrar på jv-fieldset

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

-

errorTextRef

error-text-ref

Referens till en feltext som visas ifall "valid" är satt till "false".

string

-

fieldsetid

fieldsetid

Fieldset id.

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

-

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

'medium'

valid

valid

Ska felmeddelande visas?

boolean

true

Medium

HTML 
<jv-fieldset 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-fieldset>

Small

Storleken small innehåller buggar i ios på små skärmar. Du bör därför använda medium varianten för små skärmar.

HTML 
<jv-fieldset legend="Välj ogräs" size="small">
  <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_medium_2" type="checkbox" name="Maskros">
  </jv-checkbox>
  <jv-checkbox label="Smörblomma" size="small">
    <input id="checkbox_group_medium_3" type="checkbox" name="Smörblomma">
  </jv-checkbox>
</jv-fieldset>

Obligatorisk

HTML 
<jv-fieldset 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-fieldset>

Valideringsfel

HTML 
<jv-fieldset 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-fieldset>

Statisk hjälptext

Välj de ogräs som du tycker är svårast att ta bort.
HTML 
<jv-fieldset legend="Välj ogräs" help-text-ref="helptext">
  <span slot="helptext" class="label__description">
   Välj de ogräs som du tycker är svårast att ta bort.
  </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-fieldset>

Dynamisk hjälptext

Välj de ogräs som du tycker är svårast att ta bort.
HTML 
<jv-fieldset legend="Välj ogräs" help-text-ref="helptext" required="true">
  <jv-help-text slot="helptext">Välj de ogräs som du tycker är svårast att ta bort.
  </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-fieldset>

Inaktiverad

HTML 
<jv-fieldset 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-fieldset>

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änst Länk till annan webbplats..

Exempel

Senast publicerad

Sidansvarig för sidan är Styleguide