Fältgruppering

Komponent
FFieldset
Status
Produktionsklar
Innehåll

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.

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

Radioknappar

Horisontella radioknappar

Checkboxar

API

Props
NameDescriptionTypeRequiredDefault

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
NameDescriptionBindings

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.

Esc för att stänga Pil upp/ner för att navigera Enter för att välja