How do I use the Divider Component?

Modified on Mon, 7 Oct at 9:05 AM

The Divider Component adds a clean, simple line to break up sections of your form, helping you organize content visually. Whether you're separating groups of fields or building a grid, the Divider helps create structure and clarity in your form.

Example Divider
Use dividers to visually separate content, making your form more readable and organized.

When should I use a Divider?

This component is perfect for scenarios where you need to break up content into clear sections or align components in a grid-like structure. Here are some common use cases:

Separate Form Sections
Visually divide sections of your form to improve readability and user experience.

Create a Grid of Components
Use horizontal and vertical dividers to align components into a grid layout, offering an alternative to using a Table component.

Features & Configuration

Adding a Divider component to your form is simple. Just select the Divider option from the component library and drag it onto the canvas.

After placing the component, you can customize its properties in the right-hand panel:

Properties

Axis
Set the divider to be horizontal (default) or vertical.

Wide Alignment
Enable this option to stretch the divider across the full width of the component container.

Length
Set the length of the divider as a percentage (0-100%) of the container width.

Weight
Adjust the thickness of the divider from 1 to 8 pixels to control its visual prominence.

Color
Select a color for the divider from the color spectrum or enter a specific hex color code for precise branding.

Details

ID
Each Droplet component has a unique ID for referencing in workflows or visibility settings. Edit the default ID to make it more descriptive for easy reference.