FieldSeparator height inconsistency - is h-5 intended?

[hadikman]

Component: field.tsx > FieldSeparator

Issue Description

I'm using the FieldSeparator component from shadcn's form fields, and I'm noticing it renders with a thick separator line by default. Looking at the source code, I see it has h-5 set, which seems quite tall for a simple separator line.

Here's the component code:

function FieldSeparator({
  children,
  className,
  ...props
}: React.ComponentProps<'div'> & {
  children?: React.ReactNode
}) {
  return (
    <div
      data-slot="field-separator"
      data-content={!!children}
      className={cn(
        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
        className,
      )}
      {...props}
    >
      <Separator className="absolute inset-0 top-1/2" />
      {children && (
        <span
          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
          data-slot="field-separator-content"
        >
          {children}
        </span>
      )}
    </div>
  )
}

How I'm using it:

<FieldGroup>
  <form.AppField name="title">
    {field => <field.TextField label="Title" placeholder="Post Title" />}
  </form.AppField>
  <FieldSeparator />
  <form.AppField name="slug">
    {field => <field.TextField label="Slug" placeholder="eg. post-title" />}
  </form.AppField>
</FieldGroup>

Screenshot:

Questions:

1. Is h-5 (20px) the intended height for this component? It seems visually large for a separator, but I want to confirm before overriding.

2. Am I using this incorrectly? Am I missing any context or wrapper that would change how this renders?

3. Should I be passing something to Separator (like orientation, className) to control its appearance?

4. Is this designed to accommodate the children prop (text/content inside the separator) in all cases, which is why it needs the extra height?

What I've tried:

• I can override with className="h-px" or similar to reduce the height
• The separator line itself works fine when I adjust the height
• I'm just not sure if I'm fighting the intended design or fixing a bug

---

Environment:

• Shadcn/ui version: [latest]
• React version: [your version]
• Tailwind CSS: [your version]

Any guidance from the community or maintainers would be appreciated! 🙏

[yudin-s]

Yes, h-5 is intentional in the current new-york v4 FieldSeparator, but it is the wrapper height, not the line thickness.

In the registry source, FieldSeparator renders a wrapper with:

"relative -my-2 h-5 text-sm ..."

and then puts the actual Separator inside it:

<Separator className="absolute inset-0 top-1/2" />

The Separator component itself defaults to horizontal and uses data-horizontal:h-px data-horizontal:w-full, so the line should still be 1px. The h-5 gives the component vertical space for the optional centered children label and lets the line sit around the middle of that space. That is also why the content span has background and horizontal padding: it is meant to cut a small label out of the line.

So for your questions:

1. h-5 looks intended for the field separator component, especially when it may contain text.
2. Your usage is valid if you want a field-group divider. If you want only a tight rule between fields, you may be using a component with more layout than you need.
3. You do not need to pass anything to the inner Separator; FieldSeparator does not expose that inner component's props anyway.
4. Yes, the extra height appears to be there mainly to support the optional label/content variant and the field-group spacing.

For a plain thin line with no label, I would either use Separator directly between the fields, or keep FieldSeparator and override the wrapper spacing:

<FieldSeparator className="my-0 h-px" />

If you use the override, test it inside your exact FieldGroup variant because the default -my-2 is part of the component's spacing contract.

If this explains the h-5 behavior, please mark the answer as solved.

[hadikman]

Thanks for the detailed explanation! I understand now that h-5 is intentional for the wrapper to accommodate optional labels.

However, my core issue remains: I don't want to add any custom CSS overrides (className="my-0 h-px" or similar). I'm looking for a native, built-in way to use FieldSeparator as a thin line without the extra vertical spacing.

What I'm Looking For
A native way to render FieldSeparator as a thin separator line without the h-5 wrapper height — without needing to manually override classes.

[yudin-s]

The answer from MarvelCollin matches how I read the current component too. I do not see a native FieldSeparator prop or variant that changes the no-children case into a compact 1px wrapper.

So without custom classes, the native choice today is to use Separator directly for a plain rule and reserve FieldSeparator for the label-in-the-middle pattern. If you want FieldSeparator itself to support both shapes, that would need a component/API change such as a variant="line" or compact option. That is a reasonable feature request or PR surface because it avoids making every consumer override the same spacing.

[MarvelCollin]

the h-5 is there because FieldSeparator was designed to handle both cases, a plain divider line and a divider with a text label in the middle. when you pass children (like "or" text between two fields), the wrapper needs enough vertical space so the text can sit centered over the line, and the background color trick on the span can visually "cut" through the separator. the 20px gives room for that text plus the negative margins that keep spacing consistent inside FieldGroup.

when you use it without children though, that extra height just makes the gap look too thick even though the actual line is still 1px. the component doesnt distinguish between these two modes internally, it always reserves the label space.

the reason there is no built in prop for this is because the component is relatively new and was shipped with the label use case as the primary design. a variant prop or a boolean like compact that drops the wrapper to h-px and removes the negative margins would make sense, but it just doesnt exist yet.

for now if you want a thin line without touching className, using a plain Separator component directly inside FieldGroup works. it renders as 1px and the FieldGroup spacing still applies to it since it just treats it as another child element. FieldSeparator is really only needed when you want that centered text label cutting through the line.

[chilkotiKartik]

Yes, the h-5 (20px / 1.25rem) height is intended by design to accommodate the centered label overlay (children) when text like "OR" is passed inside the separator.

Here is a breakdown of how the layout works and how to use it cleanly:

1. Why h-5 is there

When you pass children:
sx <FieldSeparator>OR</FieldSeparator>
The positions the 1px horizontal rule right across the middle ( op: 50%), while the child masks out the line and centers the text vertically within the 20px bounding box.

2. If you do NOT have children (plain divider line)

If you only need a thin divider line between fields without text:

• Option A (Pass className): Override the height with -my-1 h-auto or h-px:
  sx <FieldSeparator className="h-px my-2" />

• Option B (Use standalone ): Directly use the base Separator primitive:
  ` sx
  import { Separator } from "@/components/ui/separator"

  `

Passing className="h-px" is completely valid and will not break the component structure if no children are rendered!

[Syedmustakhem]

h-5 is the height of the FieldSeparator wrapper, not the thickness of the separator itself.

In the current implementation, the actual Separator is positioned absolutely:

So the h-5 is mainly providing a 20px-high layout area in which the separator is vertically centered. The -my-2 then offsets that space so it doesn't simply add 20px of visible spacing between the fields.

This also makes sense when FieldSeparator has children:

OR

The child is placed in the middle of the separator with a background and horizontal padding, so the component needs a layout area larger than the 1px separator line itself.

You don't need to pass orientation to the inner Separator for the normal horizontal use case. The component is already composing the separator for you, and the official examples use:

directly between Field components.

If you only want a simple 1px line with no content, overriding the wrapper's height can work, but I'd be careful with h-px because that changes the layout assumptions of the component, especially with the negative vertical margin.

So I wouldn't consider h-5 itself evidence of a bug. It's more accurate to think of it as the separator's layout/label area, while the actual visible line remains a thin Separator.

[Mr-Hasan-Hamid]

The thick line happens because of this line in the source:

<Separator className="absolute inset-0 top-1/2" />

In Tailwind, inset-0 sets top: 0; right: 0; bottom: 0; left: 0;. When top-1/2 is added after it, only top gets overridden to 50%, but bottom: 0 is still active. This forces the separator to stretch between top: 50% and bottom: 0% inside a 20px (h-5) container, which results in a 10px solid block rather than a 1px line.

You can fix this cleanly in your component by changing inset-0 to horizontal insets only (inset-x-0):

<Separator className="absolute inset-x-0 top-1/2 -translate-y-1/2" />

h-5 itself is intentional because it provides enough vertical space for the text badge (children) when content is passed, but the line stretching down to the bottom is definitely a styling bug from the inset-0 utility.