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.
rows	flex flex-col gap-2	Vertical spacing between repeated entries, including their validation messages.
row	group/many-row grid grid-cols-[minmax(0,1fr)_auto] items-start 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 [&>[data-slot=field]>[data-slot=field-label]]:sr-only	Field wrapper that lets the control shrink. Repeated labels stay accessible but visually hidden under the fieldset heading; descriptions and validation messages remain in the field layout.
removeButton	3 classes	Remove-button cell aligned with the first control-height of the row, independent of messages below it. 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:

text-[length:var(--vueda-text-micro)] font-semibold uppercase tracking-[0.06em]
leading-none
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

rows

Vertical spacing between repeated entries, including their validation messages.

Default classes:

flex flex-col gap-2

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

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-[minmax(0,1fr)_auto] items-start gap-1 2xs:gap-2

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

component

Field wrapper that lets the control shrink. Repeated labels stay accessible but visually hidden under the fieldset heading; descriptions and validation messages remain in the field layout.

Default classes:

min-w-0 [&>[data-slot=field]>[data-slot=field-label]]:sr-only

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

removeButton

Remove-button cell aligned with the first control-height of the row, independent of messages below it. Stays available to focus and appears on row hover or focus.

Default classes:

flex h-vueda-control 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:60

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:68

createButton

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

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