Kryssruta

Komponent: FFieldset , FCheckboxField
Status: Produktionsklar

Innehåll

Copy
Modellvärde i en array
Ensam kryssruta
Komplexa värden
API

Använd kryssrutor när det ska vara möjligt att välja ett valfritt antal alternativ i en lista. En ensam kryssruta användas när användaren ska välja om något ska vara på eller av.

Saknar du FCheckboxGroup-komponenten? Den är deprekerad, för detaljer se migreringsguide.

Copy

Texter till kryssrutor ska vara korta och tydliga. Det är viktigt att användaren förstår skillnaden mellan olika alternativ.

Det finns olika sätt att formulera texterna beroende på hur texten i etiketten formuleras. Etiketten kan exempelvis formuleras som en fråga och kryssrutorna som svar. Ett annat sätt är att formulera etiketten som en uppmaning och kryssrutorna som olika alternativ.

Modellvärde i en array

Du kan spara modellvärdet i en array med vilka val som är gjorda. Se koden nedan där colors är en array som ersätter tidigare booleska värden.

 <f-fieldset name="colors">
     <template #label>Färger</template>
-    <f-checkbox-field v-model="red" :value="true">
+    <f-checkbox-field v-model="colors" value="red">
         Röd
     </f-checkbox-field>
-    <f-checkbox-field v-model="green" :value="true">
+    <f-checkbox-field v-model="colors" value="green">
         Grön
     </f-checkbox-field>
 </f-fieldset>

Ensam kryssruta

Om du ska använda en ensam kryssruta ska den fortfarande placeras i en grupp. Däremot ska antalet kryssrutor inte läsas upp.

<template>
    <f-fieldset v-validation.required name="underskrift">
        <template #label>
            <h2>Underskrift</h2>
        </template>
        <f-checkbox-field v-model="sign" value="Ja">
            Jag är en ensam kryssruta så min screenreadertext kommer att vara anpassad för det.
        </f-checkbox-field>
    </f-fieldset>
</template>

<script>
import { defineComponent } from "vue";
import { FFieldset, FCheckboxField } from "@fkui/vue";

export default defineComponent({
    name: "FCheckboxGroupSingle",
    components: { FFieldset, FCheckboxField },
    data() {
        return {
            sign: [],
        };
    },
});
</script>

Komplexa värden

<template>
    <f-fieldset name="checkbox-complex-values">
        <template #label> Broschyrer </template>

        <f-checkbox-field
            id="broschyrer-bor-eller-arbetar-utomlands"
            v-model="brochures"
            :value="['Om du bor eller arbetar utomlands']"
        >
            Om du bor eller arbetar utomlands
        </f-checkbox-field>

        <f-checkbox-field
            id="broschyrer-offentlighet-sekretess"
            v-model="brochures"
            :value="{ offentlighet: false, sekretess: true }"
        >
            Offentlighet och sekretess
        </f-checkbox-field>
    </f-fieldset>
</template>

<script>
import { defineComponent } from "vue";
import { FFieldset, FCheckboxField } from "@fkui/vue";

export default defineComponent({
    name: "FCheckboxGroupValues",
    components: { FFieldset, FCheckboxField },
    data() {
        return {
            brochures: [],
        };
    },
});
</script>

API

FFieldset

Ersätter FCheckboxGroup.

Props

id: string Optional

The id for the fieldset id attribute. If the prop is not set a random value will be generated.

Default: () => ElementIdService.generateElementId()

name: string Optional

Name provided to child content as sharedName for optional usage (it will not be set on the fieldset element). For radio inputs this is a shortcut to specify the shared name attribute at one place, instead of repeatedly setting the name attribute on each radio input.

Default: undefined

labelClass: string Optional