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
Name	Description	Type	Required	Default
id	The id for the fieldset id attribute. If the prop is not set a random value will be generated.	string	false	() => ElementIdService.generateElementId()
name	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.	string	false	undefined
labelClass	The CSS classes for the label, description and error-message slot.	string	false	""
contentClass	The CSS classes for the default slot.	string	false	""
horizontal	Aligns underlying items horizontally. Supported by radiobuttons and chip layout.	boolean	false	‐
chip	Displays radio and checkbox content with chip layout.	boolean	false	false
border	Displays a box with border around radiobuttons and checkboxes.	boolean	false	‐
showDetails	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.	string	false	"never"

Slots
Name	Description	Bindings
label	Slot for label content. This slot is required.	‐
description	Optional slot for description. See FLabel for details.	descriptionClass discreteDescriptionClass
error-message	Slot for displaying single or several error messages.	hasError validationMessage
tooltip	Slot for tooltip.	‐
default	Slot for fieldset content.	‐

FCheckboxField

Ersätter FCheckboxGroupField.

Props
Name	Description	Type	Required	Default
disabled	Set to `true`, empty string `""` or string `"disabled"` to disable this input field.	boolean	false	false
id	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.	string	false	() => ElementIdService.generateElementId()
v-model	The value for the input checked attribute.	anyType	false	‐
value	The value for the input.	anyType	true	‐

Events
Name	Description	Properties
change	Vue2 v-model event.	<anonymous>: anyType \| anyType[]
update:modelValue	V-model event.	<anonymous>: anyType \| anyType[]

Slots
Name	Description	Bindings
default	Slot for label content.	‐
details	Slot for extended label, should only contain short text	height

Kakor på webbplatsen