Fältgruppering

Komponent: FFieldset
Status: Produktionsklar

Innehåll

Skärmläsaranvändare
Nästla inte
Copy
Exempel
API

Använd komponenten fältgruppering för att gruppera och knyta ihop flera inmatningskomponenter semantiskt och ge dem en gemensam etikett.

Gruppera bara några få inmatningskomponenter som hör ihop tydligt under en fråga eller rubrik.

<template>
    <f-fieldset>
        <template #label> Anställningsperiod </template>
        <f-datepicker-field
            ref="fromDate"
            v-model="fromDate"
            v-validation.required.invalidWeekdays.minDate.maxDate="{
                invalidWeekdays: { days: [Weekday.SATURDAY, Weekday.SUNDAY] },
                minDate: {
                    limit: MIN_DATE,
                },
                maxDate: {
                    limit: MAX_DATE,
                },
            }"
            @component-validity="onValidityFromDate"
        >
            Från och med
        </f-datepicker-field>

        <f-datepicker-field
            v-model="toDate"
            v-validation.required.invalidWeekdays.minDate.maxDate="{
                invalidWeekdays: { days: [Weekday.SATURDAY, Weekday.SUNDAY] },
                minDate: {
                    limit: toMinLimit,
                },
                maxDate: {
                    limit: MAX_DATE,
                },
            }"
        >
            Till och med
        </f-datepicker-field>
    </f-fieldset>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { FDate, Weekday } from "@fkui/date";
import { isEmpty } from "@fkui/logic";
import { type ComponentValidityEvent, FDatepickerField, FFieldset } from "@fkui/vue";

const MIN_DATE = FDate.now().addMonths(-1).toString();
const MAX_DATE = FDate.now().addMonths(1).toString();

export default defineComponent({
    components: { FDatepickerField, FFieldset },
    data() {
        return {
            fromDate: "",
            toDate: "",
            toMinLimit: MIN_DATE,
            Weekday,
            MIN_DATE,
            MAX_DATE,
        };
    },
    methods: {
        getMinToDate(validFromDate: boolean): string {
            if (isEmpty(this.fromDate) || !validFromDate) {
                return MIN_DATE;
            }
            return this.fromDate;
        },
        onValidityFromDate({ detail: { isValid } }: CustomEvent<ComponentValidityEvent>): void {
            this.toMinLimit = this.getMinToDate(isValid);
        },
    },
});
</script>

Fältgruppering en är fieldset med en legend.

Skärmläsaranvändare

Fältgrupperingens etikett läses upp av skärmläsaren när användaren tabbar till en komponent i gruppen. Detta ska jämföras med rubriker som bara läses upp om piltangenterna används för att stega sidans innehåll.

Nästla inte

Placera inte en fältgruppering i en annan fältgruppering. Skärmläsare läser inte upp när en fältgruppering slutar. När en fältgruppering placeras i en annan fältgruppering kommer skärmläsaren inte heller läsa upp vilken etikett den yttre fältgrupperingen har. Därmed får användaren inte tillräckligt med information för att avgöra i vilket sammanhang som en komponent är placerad.

Copy

Fältgruppering ger möjlighet att använda en etikett som inte behöver upprepas för varje inmatningskomponent. Se exemplet med från- och till-datum.

Vi återkommer med detaljer kring copy.

Exempel

Fältgruppering används alltid för att gruppera radioknappar och kryssrutor. Fältgrupperingen styr om radioknappar ska visas horisontellt eller om radioknappar eller kryssrutor ska visas som chip.

Rekommenderade attribut

<template>
    <f-fieldset name="group-name-default">
        <template #label> Arbetar du deltid? </template>
        <template #description="{ descriptionClass }">
            <span :class="descriptionClass"> Vi behöver veta om du jobbar 100% eller ej </span>
        </template>
        <template #tooltip>
            <f-tooltip
                screen-reader-text="Läs mer om Bor det barn som har fyllt 18 år i bostaden?"
                header-tag="h2"
            >
                <template #header> Lite allmän information </template>
                <template #body>
                    Här kan man skriva lite extra information om man nu önskar det!
                </template>
            </f-tooltip>
        </template>
        <f-radio-field id="deltid-ja" v-model="deltid" :value="true"> Ja </f-radio-field>
        <f-radio-field id="deltid-nej" v-model="deltid" :value="false"> Nej </f-radio-field>
    </f-fieldset>
</template>

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

export default defineComponent({
    name: "FFieldsetDefault",
    components: { FFieldset, FRadioField, FTooltip },
    data() {
        return {
            deltid: undefined,
        };
    },
});
</script>

Radioknappar

<template>
    <f-fieldset name="group-name-radio">
        <template #label> Ansöker du om sjukpenning? </template>
        <f-radio-field id="ja" v-model="sjukpenning" :value="true"> Ja </f-radio-field>
        <f-radio-field id="nej" v-model="sjukpenning" :value="false"> Nej </f-radio-field>
    </f-fieldset>
</template>

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

export default defineComponent({
    name: "FFieldsetRadioButtons",
    components: { FFieldset, FRadioField },
    data() {
        return {
            sjukpenning: undefined,
        };
    },
});
</script>

Horisontella radioknappar

<template>
    <f-fieldset name="group-name-radio-horizontal" horizontal>
        <template #label> Ligger radioknapparna horisontellt? </template>
        <f-radio-field id="horisontellt-ja" v-model="model" :value="true"> Ja </f-radio-field>
        <f-radio-field id="horisontellt-nej" v-model="model" :value="false"> Nej </f-radio-field>
    </f-fieldset>
</template>

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

export default defineComponent({
    name: "FFieldsetRadioButtons",
    components: { FFieldset, FRadioField },
    data() {
        return {
            model: undefined,
        };
    },
});
</script>

Checkboxar

<template>
    <f-fieldset name="group-name-checkbox">
        <template #label> Vilka dagar i veckan vill du bli kontaktad? </template>
        <f-checkbox-field id="dagar-mandag" v-model="dagar" value="mandag">
            Måndag
        </f-checkbox-field>
        <f-checkbox-field id="dagar-tisdag" v-model="dagar" value="tisdag">
            Tisdag
        </f-checkbox-field>
        <f-checkbox-field id="dagar-onsdag" v-model="dagar" value="onsdag">
            Onsdag
        </f-checkbox-field>
        <f-checkbox-field id="dagar-torsdag" v-model="dagar" value="torsdag">
            Torsdag
        </f-checkbox-field>
        <f-checkbox-field id="dagar-fredag" v-model="dagar" value="fredag">
            Fredag
        </f-checkbox-field>
    </f-fieldset>
</template>

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

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

API

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