Komponent

FFieldset FCheckboxField

Status

Produktionsklar

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.

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

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

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

Komplexa värden

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

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

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

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

The CSS classes for the label, description and error-message slot.

Default: ""

contentClass: string Optional

The CSS classes for the default slot.

Default: ""

horizontal: boolean Optional

Aligns underlying items horizontally. Supported by radiobuttons and chip layout.

chip: boolean Optional

Displays radio and checkbox content with chip layout.

border: boolean Optional

Displays a box with border around radiobuttons and checkboxes.

showDetails: string Optional

Sets visibility behaviour for details slot in selectable child items. By default details slot is not rendered.

• never (default) - Never show item details.

• when-selected - Show item details when selected.
• always - Always show item details.

Default: "never"

Slots

label

Slot for label content. This slot is required.

description

Optional slot for description. See FLabel for details.

Bindings:

• description-class: string[] — CSS classes for primary description content.
• format-description-class: string[] — CSS classes for format description.

error-message

Slot for label content. This slot is required.

Bindings:

• hasError: boolean — Set to true when a validation error is present
• validationMessage: string — Descriptive validation error message for current error

tooltip

Slot for tooltip.

default

Slot for fieldset content.

FCheckboxField

Ersätter FCheckboxGroupField.

Models

v-model: anyType Optional

The value for the input checked attribute.

Props

disabled: boolean Optional

Set to true, empty string "" or string "disabled" to disable this input field.

id: string Optional

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

Default: () => ElementIdService.generateElementId()

value: anyType

The value for the input.

Events

change

Emitted when the value of the checkbox changes.

Arguments:

• <anonymous>: anyType | anyType[]

Slots

default

Slot for label content.

details

Slot for extended label, should only contain short text

Bindings:

• height: number — The height of the expanded details content.