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

# FieldSeparator

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

> The positioned wrapper for a labelled field divider. It reserves the line height and variant-specific vertical offset used inside field groups.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/FieldSeparator.md#theme-key-FieldSeparator-root) | `relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2` | The positioned wrapper for a labelled field divider. It reserves the line height and variant-specific vertical offset used inside field groups. |
| [line](/v3/reference/theming/keys/FieldSeparator.md#theme-key-FieldSeparator-line) | `absolute inset-0 top-1/2` | The horizontal rule behind a field separator label. It fills the separator wrapper and aligns through the vertical center. |
| [content](/v3/reference/theming/keys/FieldSeparator.md#theme-key-FieldSeparator-content) | `bg-background text-muted-foreground relative mx-auto block w-fit px-2` | The label content laid over the separator line. It uses the page background as a mask so the text remains readable over the rule. |

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

## root

> The positioned wrapper for a labelled field divider. It reserves the line height and variant-specific vertical offset used inside field groups.

Default classes:

`relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2`

Source: `client/lib/theme/vueda-tailwind/shell/FieldSeparator.theme.js:18`

<a id="theme-key-FieldSeparator-line"></a>

## line

> The horizontal rule behind a field separator label. It fills the separator wrapper and aligns through the vertical center.

Default classes:

`absolute inset-0 top-1/2`

Source: `client/lib/theme/vueda-tailwind/shell/FieldSeparator.theme.js:24`

<a id="theme-key-FieldSeparator-content"></a>

## content

> The label content laid over the separator line. It uses the page background as a mask so the text remains readable over the rule.

Default classes:

`bg-background text-muted-foreground relative mx-auto block w-fit px-2`

Source: `client/lib/theme/vueda-tailwind/shell/FieldSeparator.theme.js:30`