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

# FieldSetTabularInline

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

> Class hook for the unsaved-row Delete button. Tone, emphasis, and size come from the component; appearance comes from [Button](/v3/reference/theming/keys/Button.md).

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [destroyButton](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-destroyButton) |  | Class hook for the unsaved-row Delete button. Tone, emphasis, and size come from the component; appearance comes from [Button](/v3/reference/theming/keys/Button.md). |
| [root](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-root) | 2 classes | Card shell for tabular inline editing, including nested-fieldset inset chrome. |
| [inner](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-inner) | `flex flex-col` | Unpadded vertical stack so the embedded grid can merge with the card edge. |
| [hr](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-hr) | `hidden` | Legacy divider slot kept hidden because the title bar owns the separator. |
| [titleBar](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-titleBar) | 4 classes | Eyebrow title bar for tabular inline fieldsets. See also: [FieldSetStackedInline.titleBar](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-titleBar). |
| [titleTrigger](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-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/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-titleBarToggle) | 4 classes | Interactive state layer for a hidable tabular title bar. See also: [FieldSetStackedInline.titleBarToggle](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-titleBarToggle). |
| [toggleIndicator](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-toggleIndicator) | 2 classes | Chevron container that rotates when the tabular fieldset collapses. |
| [title](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-title) |  | Title text slot inside the tabular title bar. |
| [actionBar](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-actionBar) | 2 classes | Trailing action group in the title bar. |
| [itemActionBar](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-itemActionBar) | 2 classes | Row action group used by the embedded grid action column. |
| [body](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-body) | `flex flex-col` | Grid body wrapper that stamps `data-flush` so [ObjectsGrid.root](/v3/reference/theming/keys/ObjectsGrid.md#theme-key-ObjectsGrid-root) drops duplicate chrome. |
| [objectsGrid](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-objectsGrid) | `w-full` | Embedded objects grid host. |
| [objectsGridHidden](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-objectsGridHidden) | `hidden` | Legacy grid visibility hook. CollapsibleContent now controls body visibility. |
| [destroyPill](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-destroyPill) | 5 classes | Compact destructive status pill shown on rows marked for destroy. |
| [field](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-field) | `min-w-1` | Wrapper around each field rendered for card-mode tabular rows. |
| [fieldInner](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-fieldInner) |  | Pass-through wrapper immediately inside a rendered tabular field. |
| [createButton](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-createButton) |  | Pass-through hook for the Create action. Button styling comes from [Button](/v3/reference/theming/keys/Button.md). |
| [inLineCreateButton](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-inLineCreateButton) | `!w-full h-full` | Full-width inline create affordance used by row-shaped invitations. |
| [toggleButton](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-toggleButton) |  | Pass-through hook for a separate hide/show button. The title bar is the canonical toggle surface. |
| [createButtonCard](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-createButtonCard) | `border-dashed` | Card-mode create invitation gets dashed chrome to read as an empty row affordance. |
| [choresPanel](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-choresPanel) | 3 classes | Fieldset-level help and validation panel below the embedded grid. |
| [emptyState](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-emptyState) | 3 classes | Dashed invitation block used when no tabular rows exist. See also: [FieldSetStackedInline.emptyState](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-emptyState). |
| [emptyStateIcon](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-emptyStateIcon) | 3 classes | Muted icon disc inside the tabular empty-state invitation. |
| [emptyStateTitle](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-emptyStateTitle) | `text-[length:var(--vueda-text-reading)] font-semibold leading-snug text-foreground` | Short empty-state headline for tabular inline rows. |
| [emptyStateDesc](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-emptyStateDesc) | 2 classes | Supporting empty-state hint copy for tabular inline rows. |
| [themeOverride](/v3/reference/theming/keys/FieldSetTabularInline.md#theme-key-FieldSetTabularInline-themeOverride) |  | Embedded cells keep controls top-aligned when messages add height and allow help and validation text to wrap. |

<a id="theme-key-FieldSetTabularInline-destroyButton"></a>

## destroyButton

> Class hook for the unsaved-row Delete button. Tone, emphasis, and size come from the component; appearance comes from [Button](/v3/reference/theming/keys/Button.md).

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

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

## root

> Card shell for tabular inline editing, 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/FieldSetTabularInline.theme.js:22`

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

## inner

> Unpadded vertical stack so the embedded grid can merge with the card edge.

Default classes:

`flex flex-col`

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

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

## hr

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

Default classes:

`hidden`

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

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

## titleBar

> Eyebrow title bar for tabular inline fieldsets. See also: [FieldSetStackedInline.titleBar](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-titleBar).

Default classes:

```text
flex items-center gap-2 2xs:gap-3 px-3 py-2 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/FieldSetTabularInline.theme.js:38`

<a id="theme-key-FieldSetTabularInline-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/FieldSetTabularInline.theme.js:47`

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

## titleBarToggle

> Interactive state layer for a hidable tabular title bar. See also: [FieldSetStackedInline.titleBarToggle](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-titleBarToggle).

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/FieldSetTabularInline.theme.js:53`

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

## toggleIndicator

> Chevron container that rotates when the tabular 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/FieldSetTabularInline.theme.js:62`

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

## title

> Title text slot inside the tabular title bar.

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

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

## actionBar

> Trailing action group in the title bar.

Default classes:

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

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

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

## itemActionBar

> Row action group used by the embedded grid action column.

Default classes:

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

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

<a id="theme-key-FieldSetTabularInline-body"></a>

## body

> Grid body wrapper that stamps `data-flush` so [ObjectsGrid.root](/v3/reference/theming/keys/ObjectsGrid.md#theme-key-ObjectsGrid-root) drops duplicate chrome.

Default classes:

`flex flex-col`

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

<a id="theme-key-FieldSetTabularInline-objectsGrid"></a>

## objectsGrid

> Embedded objects grid host.

Default classes:

`w-full`

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

<a id="theme-key-FieldSetTabularInline-objectsGridHidden"></a>

## objectsGridHidden

> Legacy grid visibility hook. CollapsibleContent now controls body visibility.

Default classes:

`hidden`

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

<a id="theme-key-FieldSetTabularInline-destroyPill"></a>

## destroyPill

> Compact destructive status pill shown on rows marked for destroy.

Default classes:

```text
inline-flex items-center justify-center shrink-0
px-1.5 h-5 rounded-vueda-control
bg-destructive/10 text-destructive
text-[10px] font-semibold uppercase tracking-[0.06em] leading-none
[font-variant-numeric:tabular-nums]
```

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

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

## field

> Wrapper around each field rendered for card-mode tabular rows.

Default classes:

`min-w-1`

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

<a id="theme-key-FieldSetTabularInline-fieldInner"></a>

## fieldInner

> Pass-through wrapper immediately inside a rendered tabular field.

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

<a id="theme-key-FieldSetTabularInline-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/FieldSetTabularInline.theme.js:111`

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

## inLineCreateButton

> Full-width inline create affordance used by row-shaped invitations.

Default classes:

`!w-full h-full`

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

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

## toggleButton

> Pass-through hook for a separate hide/show button. The title bar is the canonical toggle surface.

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

<a id="theme-key-FieldSetTabularInline-createButtonCard"></a>

## createButtonCard

> Card-mode create invitation gets dashed chrome to read as an empty row affordance.

Default classes:

`border-dashed`

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

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

## choresPanel

> Fieldset-level help and validation panel below the embedded grid.

Default classes:

```text
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/FieldSetTabularInline.theme.js:127`

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

## emptyState

> Dashed invitation block used when no tabular rows exist. See also: [FieldSetStackedInline.emptyState](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-emptyState).

Default classes:

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

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

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

## emptyStateIcon

> Muted icon disc inside the tabular 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/FieldSetTabularInline.theme.js:143`

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

## emptyStateTitle

> Short empty-state headline for tabular inline rows.

Default classes:

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

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

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

## emptyStateDesc

> Supporting empty-state hint copy for tabular inline rows.

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/FieldSetTabularInline.theme.js:155`

<a id="theme-key-FieldSetTabularInline-themeOverride"></a>

## themeOverride

> Embedded cells keep controls top-aligned when messages add height and allow help and validation text to wrap.

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