Retool Vertical Divider: How to Build One Today

If you've searched for a Retool vertical divider workaround, you already know the frustration: Retool ships a horizontal Divider component out of the box, but there's no vertical equivalent. The community feature request has accumulated upvotes since 2022, and as of the time of writing, Retool's own team confirmed it isn't on the immediate roadmap. So if you need to visually separate columns or side-by-side form sections today, you have to build it yourself. The good news: it takes about two minutes.

Why Retool Doesn't Have a Vertical Divider Component

Retool's Divider component is purely horizontal — it renders a full-width <hr>-style line to separate stacked sections of an app. For layouts where content flows top-to-bottom, this works great. But modern internal tools often use side-by-side layouts: a filter panel next to a data table, a form split into two columns, or a detail view alongside a list. In those cases, a vertical separator is the natural choice. The Retool team is tracking the request, but it hasn't been prioritized. Until it ships, you need a workaround.

Workaround 1: Vertical Divider Using an HTML Component

This is the cleanest and most flexible approach. Retool's HTML component lets you inject arbitrary markup and inline styles, which means you can render a true vertical line with full control over color, height, and thickness.

• Drag an HTML component into your canvas and place it between the two sections you want to divide.
• In the component's HTML property field, paste the following:

<div style="width: 1px; height: 100%; background-color: #e0e0e0; margin: 0 auto;"></div>

• Resize the component to be narrow — typically 8–16px wide is enough to act as a visual separator without taking up real estate.
• Set the component height to match the tallest element in the row, or use 100% and let the container handle it.
• Adjust background-color to match your app's color scheme. Common choices are #e0e0e0 for light apps or #3a3a3a for dark themes.

This approach gives you a pixel-perfect vertical line that behaves like a native divider. You can also add a border-radius or tweak the opacity if you want something more subtle.

Workaround 2: Use a Styled Container as a Divider

If you're already working heavily with Container components for layout, you can repurpose a narrow container as a vertical divider. This is especially useful when your layout is built on Retool's grid and you want the divider to snap to the grid properly.

• Add a Container component between your two sections.
• Set its width to the minimum grid columns — usually 1 or 2 columns depending on your grid size.
• In the container's Style settings, set a border-left or border-right to something like 1px solid #e0e0e0.
• Remove the container's background color and padding so it renders as a clean line.
• Leave the container empty — it exists purely as a visual separator.

The downside of this approach is that containers add a small amount of structural overhead and can sometimes shift surrounding components if your grid is tight. The HTML component method is generally more predictable for purely cosmetic elements.

How to Align the Vertical Divider Properly

The most common issue with either workaround is that the divider doesn't stretch to the full height of its neighboring components. Here's how to fix that:

• Wrap your two side-by-side sections and the divider inside a shared Container or use Retool's Stack layout with horizontal direction set.
• In a Stack container, set Align items to stretch — this forces all children, including your divider, to match the height of the tallest sibling.
• If you're using the free-form canvas (not Stack), manually match the height of the HTML component to the tallest adjacent element by dragging its bottom edge.
• For dynamic content where height changes at runtime, the Stack + stretch approach is far more reliable than manually setting pixel heights.

When the Native Divider Component Ships

Retool's team has confirmed the vertical divider is in the backlog. When it does ship, it will likely appear as an Orientation property on the existing Divider component — similar to how other UI libraries handle it. At that point, you can swap out your HTML component for the native one with minimal refactoring. Until then, the HTML workaround is stable, lightweight, and easy to maintain.

Summary

Retool doesn't offer a native vertical divider component yet, but you don't have to wait for one. Use an HTML component with a single inline-styled <div> for the cleanest result, or lean on a styled Container if you're working within a grid layout. Wrap both in a Stack container with stretch alignment to make sure your divider scales correctly with dynamic content. Two minutes of setup, and your layout looks exactly the way it should.