What You'll Build

A well-organized form with visual separators between sections. You'll learn how to use spacers and horizontal lines to create clear visual boundaries in your forms.

What You'll Learn

How to add basic spacers between form sections
Customizing spacer height with different units
Adding horizontal lines as visual dividers
Styling lines with colors, styles, and thickness
Creating dynamic spacers with conditional visibility

➖

Visual Organization

Spacers and dividers help users understand the structure of your form. They create visual breathing room and indicate where one section ends and another begins.

Use them to group related fields and improve form readability!

Tutorial Steps

Step 1: Basic Spacer

Let's start by adding a simple spacer between form sections. The addSpacer() method creates vertical space between rows.

💡 Tip:

By default, a spacer adds 50px of vertical space. This is great for separating logical sections of your form.

Step 2: Custom Height

You can customize the spacer height using different units like px, rem, or em.

💡 Tip:

Use larger heights for major section breaks and smaller heights for subtle separations. Common values are 30px for subtle, 50px for normal, and 80px+ for major breaks.

Step 3: Adding a Horizontal Line

Enable showLine: true to display a horizontal line in the middle of the spacer. This creates a clear visual divider.

💡 Tip:

Horizontal lines are excellent for separating major form sections like "Personal Info" from "Contact Info". The line appears centered within the spacer height.

Step 4: Styling the Line

Customize the line appearance with lineColor, lineStyle, and lineThickness. Available styles are solid, dashed, and dotted.

💡 Tip:

Match line colors to your brand or use subtle grays for a professional look. Dashed lines feel lighter, while solid lines create stronger separation.

Step 5: Dynamic Visibility

Use isVisible with a callback to show or hide spacers based on form state. This is useful when sections appear conditionally.

💡 Tip:

When you conditionally show form sections, don't forget to also conditionally show their spacers! This keeps your form layout clean and logical.

Step 6: Complete Form with Spacers

Let's put it all together! Here's a complete form using multiple spacers to organize different sections.

💡 Tip:

Use consistent spacer styling throughout your form. Pick one or two line styles and colors, and use them consistently for similar types of section breaks.

SpacerConfig Reference

height: Total height of the spacer (default: '50px'). Accepts px, rem, em, or number.
showLine: Whether to show a horizontal line (default: false)
lineColor: Color of the line (default: '#ccc')
lineStyle: Style of the line: 'solid', 'dashed', or 'dotted' (default: 'dashed')
lineThickness: Thickness of the line (default: '1px')
isVisible: Control visibility dynamically with a callback

Try It Yourself

Challenge 1: Create a form with three sections separated by dotted lines
Challenge 2: Use different line colors to indicate section importance
Challenge 3: Create a spacer that only shows when a "Show Details" checkbox is checked
Challenge 4: Experiment with rem and em units for responsive spacing
Challenge 5: Combine spacers with subforms for nested section organization

Next Steps

Great job! You've learned how to use spacers and dividers to organize your forms. Ready to explore subforms for more complex organization?

Continue to Subforms Tutorial

Other learning paths:

Learn about multi-column layouts for field arrangement
Master conditional visibility for dynamic forms
Explore computed values for automatic calculations