Vi använder kakor (cookies) för att webbplatsen ska fungera så bra som möjligt för dig.
Vi använder också kakor för webbanalys för att göra webbplatsen bättre.
Godkänner du att vi också använder kakor för webbanalys?
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.
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.
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.
<template><f-fieldsetname="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-tooltipscreen-reader-text="Läs mer om Bor det barn som har fyllt 18 år i bostaden?"><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-fieldid="deltid-ja"v-model="deltid":value="true"> Ja </f-radio-field><f-radio-fieldid="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";
exportdefaultdefineComponent({
name: "FFieldsetDefault",
components: { FFieldset, FRadioField, FTooltip },
data() {
return {
deltid: undefined,
};
},
});
</script>
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.