---
url: "https://vueda.dev/v3/reference/theming/keys/FieldSetMany.md"
title: "FieldSetMany"
---

# FieldSetMany

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

> Card shell for a repeated-value fieldset. See also: [FieldSetStackedInline.root](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-root).

Vue component: [FieldSetMany](/v3/reference/api/vue/FieldSetMany.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/FieldSetMany.md#theme-key-FieldSetMany-root) | 2 classes | Card shell for a repeated-value fieldset. See also: [FieldSetStackedInline.root](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-root). |
| [inner](/v3/reference/theming/keys/FieldSetMany.md#theme-key-FieldSetMany-inner) | `flex flex-col p-3 gap-2` | Padded vertical stack that holds the title bar, rows, chores panel, and footer. |
| [label](/v3/reference/theming/keys/FieldSetMany.md#theme-key-FieldSetMany-label) | 3 classes | Compact uppercase fieldset label. |
| [header](/v3/reference/theming/keys/FieldSetMany.md#theme-key-FieldSetMany-header) | 2 classes | Header strip that separates the fieldset label from repeated rows and tints nested fieldsets. |
| [rows](/v3/reference/theming/keys/FieldSetMany.md#theme-key-FieldSetMany-rows) | `flex flex-col gap-2` | Vertical spacing between repeated entries, including their validation messages. |
| [row](/v3/reference/theming/keys/FieldSetMany.md#theme-key-FieldSetMany-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](/v3/reference/theming/keys/FieldSetMany.md#theme-key-FieldSetMany-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](/v3/reference/theming/keys/FieldSetMany.md#theme-key-FieldSetMany-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](/v3/reference/theming/keys/FieldSetMany.md#theme-key-FieldSetMany-footer) | `flex justify-end mt-0.5` | Right-aligned footer for adding another repeated value. |
| [createButton](/v3/reference/theming/keys/FieldSetMany.md#theme-key-FieldSetMany-createButton) |  | Pass-through hook for the Add action. Button styling comes from [Button](/v3/reference/theming/keys/Button.md). |

<a id="theme-key-FieldSetMany-root"></a>

## root

> Card shell for a repeated-value fieldset. See also: [FieldSetStackedInline.root](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-root).

Default classes:

```text
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`

<a id="theme-key-FieldSetMany-inner"></a>

## 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`

<a id="theme-key-FieldSetMany-label"></a>

## label

> Compact uppercase fieldset label.

Default classes:

```text
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`

<a id="theme-key-FieldSetMany-header"></a>

## header

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

Default classes:

```text
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`

<a id="theme-key-FieldSetMany-rows"></a>

## 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`

<a id="theme-key-FieldSetMany-row"></a>

## 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`

<a id="theme-key-FieldSetMany-component"></a>

## 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`

<a id="theme-key-FieldSetMany-removeButton"></a>

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

```text
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`

<a id="theme-key-FieldSetMany-footer"></a>

## 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`

<a id="theme-key-FieldSetMany-createButton"></a>

## createButton

> Pass-through hook for the Add action. Button styling comes from [Button](/v3/reference/theming/keys/Button.md).

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