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

# FieldSetStackedInline

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

> Card shell for stacked inline rows, including nested-fieldset inset chrome.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-root) | 2 classes | Card shell for stacked inline rows, including nested-fieldset inset chrome. |
| [inner](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-inner) | `flex flex-col p-3 gap-2` | Padded vertical stack that holds the title bar, row list, chores panel, and empty state. |
| [hr](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-hr) | `hidden` | Legacy divider slot kept hidden because the title bar owns the fieldset separator. |
| [titleBar](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-titleBar) | 4 classes | Eyebrow title bar containing the disclosure trigger and a separate Create action. |
| [titleTrigger](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-titleTrigger) | `flex flex-1 min-w-0 items-center gap-2 2xs:gap-3 text-left [font:inherit] [text-transform:inherit] tracking-[inherit] -ml-3 -my-2 px-3 py-2 self-stretch` | Disclosure label and chevron, beside the independent Create action. |
| [titleBarToggle](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-titleBarToggle) | 4 classes | Interactive state layer for hidable title bars. |
| [toggleIndicator](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-toggleIndicator) | 2 classes | Chevron container that rotates when the fieldset collapses. |
| [title](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-title) |  | Title text slot inside the title bar. |
| [field](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-field) | `min-w-1` | Wrapper around each rendered child field inside a stacked row. |
| [inlineRows](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-inlineRows) | `flex flex-col gap-2` | Vertical list of inline object rows. |
| [inlineRow](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-inlineRow) |  | Pass-through hook for each rendered row component. Row chrome lives on [FieldSetStackedInlineRow.root](/v3/reference/theming/keys/FieldSetStackedInlineRow.md#theme-key-FieldSetStackedInlineRow-root). |
| [inLineCreateButton](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-inLineCreateButton) | `!w-full h-full` | Full-width inline create affordance used when a row-shaped invitation is rendered. |
| [toggleButton](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-toggleButton) |  | Pass-through hook for the hide/show button when consumers render it separately. |
| [actionBar](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-actionBar) | 2 classes | Trailing action group beside the disclosure trigger. |
| [itemActionBar](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-itemActionBar) | 2 classes | Row-level action group for create, destroy, or selection controls. |
| [createButton](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-createButton) |  | Pass-through hook for the Create action. Button styling comes from [Button](/v3/reference/theming/keys/Button.md). |
| [choresPanel](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-choresPanel) | 3 classes | Fieldset-level help and validation panel below the row stack. |
| [emptyState](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-emptyState) | 3 classes | Dashed invitation block used when no inline rows exist. |
| [emptyStateIcon](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-emptyStateIcon) | 3 classes | Muted icon disc inside the empty-state invitation. |
| [emptyStateTitle](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-emptyStateTitle) | `text-[length:var(--vueda-text-reading)] font-semibold leading-snug text-foreground` | Short empty-state headline. |
| [emptyStateDesc](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-emptyStateDesc) | 2 classes | Supporting empty-state hint copy. |

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

## root

> Card shell for stacked inline rows, including nested-fieldset inset chrome.

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/FieldSetStackedInline.theme.js:18`

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

## inner

> Padded vertical stack that holds the title bar, row list, chores panel, and empty state.

Default classes:

`flex flex-col p-3 gap-2`

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

<a id="theme-key-FieldSetStackedInline-hr"></a>

## hr

> Legacy divider slot kept hidden because the title bar owns the fieldset separator.

Default classes:

`hidden`

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

<a id="theme-key-FieldSetStackedInline-titleBar"></a>

## titleBar

> Eyebrow title bar containing the disclosure trigger and a separate Create action.

Default classes:

```text
flex items-center gap-2 2xs:gap-3 px-3 py-2 -mx-3 -mt-3 mb-1 border-b-hairline
text-[length:var(--vueda-text-micro)] font-semibold uppercase tracking-[0.06em] leading-none
text-muted-foreground
[[data-vueda-fieldset]_&]:bg-[color-mix(in_oklab,var(--muted)_20%,var(--card))]
```

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

<a id="theme-key-FieldSetStackedInline-titleTrigger"></a>

## titleTrigger

> Disclosure label and chevron, beside the independent Create action.

Default classes:

`flex flex-1 min-w-0 items-center gap-2 2xs:gap-3 text-left [font:inherit] [text-transform:inherit] tracking-[inherit] -ml-3 -my-2 px-3 py-2 self-stretch`

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

<a id="theme-key-FieldSetStackedInline-titleBarToggle"></a>

## titleBarToggle

> Interactive state layer for hidable title bars.

Default classes:

```text
cursor-pointer select-none
hover:bg-accent hover:text-accent-foreground active:bg-accent-active active:text-accent-foreground
focus-visible:focus-ring-shadow
transition-colors
```

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

<a id="theme-key-FieldSetStackedInline-toggleIndicator"></a>

## toggleIndicator

> Chevron container that rotates when the fieldset collapses.

Default classes:

```text
inline-flex items-center justify-center shrink-0 size-4
transition-transform duration-150
```

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

<a id="theme-key-FieldSetStackedInline-title"></a>

## title

> Title text slot inside the title bar.

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

<a id="theme-key-FieldSetStackedInline-field"></a>

## field

> Wrapper around each rendered child field inside a stacked row.

Default classes:

`min-w-1`

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

<a id="theme-key-FieldSetStackedInline-inlineRows"></a>

## inlineRows

> Vertical list of inline object rows.

Default classes:

`flex flex-col gap-2`

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

<a id="theme-key-FieldSetStackedInline-inlineRow"></a>

## inlineRow

> Pass-through hook for each rendered row component. Row chrome lives on [FieldSetStackedInlineRow.root](/v3/reference/theming/keys/FieldSetStackedInlineRow.md#theme-key-FieldSetStackedInlineRow-root).

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

<a id="theme-key-FieldSetStackedInline-inLineCreateButton"></a>

## inLineCreateButton

> Full-width inline create affordance used when a row-shaped invitation is rendered.

Default classes:

`!w-full h-full`

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

<a id="theme-key-FieldSetStackedInline-toggleButton"></a>

## toggleButton

> Pass-through hook for the hide/show button when consumers render it separately.

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

<a id="theme-key-FieldSetStackedInline-actionBar"></a>

## actionBar

> Trailing action group beside the disclosure trigger.

Default classes:

```text
grow-0 flex gap-1 2xs:gap-2 2xl:gap-4
ml-auto
```

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

<a id="theme-key-FieldSetStackedInline-itemActionBar"></a>

## itemActionBar

> Row-level action group for create, destroy, or selection controls.

Default classes:

```text
flex gap-1 2xs:gap-2 2xl:gap-4
items-baseline
```

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

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

## createButton

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

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

<a id="theme-key-FieldSetStackedInline-choresPanel"></a>

## choresPanel

> Fieldset-level help and validation panel below the row stack.

Default classes:

```text
-mx-3 -mb-3 px-3 py-2 border-t-hairline
bg-[color-mix(in_oklab,var(--muted)_15%,var(--card))]
flex flex-col gap-1
```

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

<a id="theme-key-FieldSetStackedInline-emptyState"></a>

## emptyState

> Dashed invitation block used when no inline rows exist.

Default classes:

```text
flex flex-col items-center justify-center gap-2
py-8 px-6 text-center
rounded-vueda-card border-2 border-dashed bg-muted/30
```

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

<a id="theme-key-FieldSetStackedInline-emptyStateIcon"></a>

## emptyStateIcon

> Muted icon disc inside the empty-state invitation.

Default classes:

```text
flex items-center justify-center
size-9 rounded-full bg-muted text-muted-foreground
text-[length:var(--vueda-text-title)] leading-none
```

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

<a id="theme-key-FieldSetStackedInline-emptyStateTitle"></a>

## emptyStateTitle

> Short empty-state headline.

Default classes:

`text-[length:var(--vueda-text-reading)] font-semibold leading-snug text-foreground`

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

<a id="theme-key-FieldSetStackedInline-emptyStateDesc"></a>

## emptyStateDesc

> Supporting empty-state hint copy.

Default classes:

```text
text-[length:var(--vueda-text-supporting)] font-normal leading-normal
text-muted-foreground max-w-[44ch]
```

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