Använd checkboxar när användaren kan välja ett eller flera av max sju alternativ.
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:
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 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.
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 |
<jv-checkbox label="Jag godkänner villkoren">
<input id="checkbox_alone" type="checkbox" name="Jag godkänner villkoren">
</jv-checkbox>
<jv-checkbox label="Jag godkänner villkoren" size="small">
<input id="checkbox_alone_medium" type="checkbox" name="Jag godkänner villkoren">
</jv-checkbox>
<jv-checkbox label="Jag godkänner villkoren">
<input id="checkbox_alone_required" required="" type="checkbox" name="Jag godkänner villkoren">
</jv-checkbox>
<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>
<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>
<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>
<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>
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.
<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>
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 |
<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>
<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>
<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>
<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>
<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>
<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>
<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>
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..
Senast publicerad
Sidansvarig för sidan är Styleguide