Använd checkboxar när användaren kan välja ett eller flera av max sju alternativ.
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 du använda en så pass tydlig etikett så att en hjälptext inte behövs. Behöver du använda en hjälptext kan du välja mellan två varianter, statisk och dynamisk. Använd den statiska i första hand. Du ska använda samma variant i hela systemet och alltså inte blanda dem. Varianterna är:
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="" checked="" 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>
Här kan du se exempel på en checkboxgrupp kombinerade med textfält.
Exempel på en e-tjänst Länk till annan webbplats..