FieldSetMany

Source: client/lib/theme/vueda-tailwind/form/index.js

Card shell for a repeated-value fieldset. See also: FieldSetStackedInline.root.

Vue component: FieldSetMany

Slot	Default classes	Description
root	2 classes	Card shell for a repeated-value fieldset. See also: FieldSetStackedInline.root.
inner	flex flex-col p-3 gap-2	Padded vertical stack that holds the title bar, rows, chores panel, and footer.
label	3 classes	Compact uppercase fieldset label.
header	2 classes	Header strip that separates the fieldset label from repeated rows and tints nested fieldsets.
row	group/many-row grid grid-cols-[1fr_auto] items-center gap-1 2xs:gap-2	One repeated value row with a full-width field track and a reveal-on-hover remove control.
component	min-w-0	Field wrapper that lets the rendered control shrink without overflowing the row.
removeButton	3 classes	Remove-button cell that stays available to focus and appears on row hover or focus.
footer	flex justify-end mt-0.5	Right-aligned footer for adding another repeated value.
createButton		Pass-through hook for the Add action. Button styling comes from Button.

root

Card shell for a repeated-value fieldset. See also: FieldSetStackedInline.root.

Default classes:

bg-card border-hairline rounded-vueda-card overflow-clip
[[data-vueda-fieldset]_&]:border-0 [[data-vueda-fieldset]_&]:shadow-[inset_0_0_0_var(--vueda-hairline-width)_var(--border)]

Source: client/lib/theme/vueda-tailwind/form/FieldSetMany.theme.js:18

inner

Padded vertical stack that holds the title bar, rows, chores panel, and footer.

Default classes:

flex flex-col p-3 gap-2

Source: client/lib/theme/vueda-tailwind/form/FieldSetMany.theme.js:26

label

Compact uppercase fieldset label.

Default classes:

leading-none
text-[length:var(--vueda-text-micro)] font-semibold uppercase tracking-[0.06em]
text-muted-foreground

Source: client/lib/theme/vueda-tailwind/form/FieldSetMany.theme.js:30

header

Header strip that separates the fieldset label from repeated rows and tints nested fieldsets.

Default classes:

flex items-center justify-between gap-2 px-3 py-2 -mx-3 -mt-3 mb-1 border-b-hairline
[[data-vueda-fieldset]_&]:bg-[color-mix(in_oklab,var(--muted)_20%,var(--card))]

Source: client/lib/theme/vueda-tailwind/form/FieldSetMany.theme.js:38

row

One repeated value row with a full-width field track and a reveal-on-hover remove control.

Default classes:

group/many-row grid grid-cols-[1fr_auto] items-center gap-1 2xs:gap-2

Source: client/lib/theme/vueda-tailwind/form/FieldSetMany.theme.js:48

component

Field wrapper that lets the rendered control shrink without overflowing the row.

Default classes:

min-w-0

Source: client/lib/theme/vueda-tailwind/form/FieldSetMany.theme.js:52

removeButton

Remove-button cell that stays available to focus and appears on row hover or focus.

Default classes:

flex items-center justify-center
opacity-0 transition-opacity
group-hover/many-row:opacity-100 group-focus-within/many-row:opacity-100

Source: client/lib/theme/vueda-tailwind/form/FieldSetMany.theme.js:56

footer

Right-aligned footer for adding another repeated value.

Default classes:

flex justify-end mt-0.5

Source: client/lib/theme/vueda-tailwind/form/FieldSetMany.theme.js:64

createButton

Pass-through hook for the Add action. Button styling comes from Button.

Source: client/lib/theme/vueda-tailwind/form/FieldSetMany.theme.js:68