Spacing and alignment basics

Good spacing helps users move down the form without visual clutter. You adjust most spacing on layout containers and the Main tab, not by typing CSS.

Example: team profile form

This walkthrough uses one Team profile form throughout: a vertical Stack with a large Spacing value between Company name, Department, and Role.

Step 1: Select the parent Stack

1. Open Tree → Expand all.
2. Select the parent Stack that wraps your fields (looseStack in this example).
3. Confirm the canvas shows clear space between each field.

Step 2: Set spacing on Main

1. Open Main on the right.
2. Find Spacing (or Gap on some components).
3. Change the value and watch how the gap changes on the canvas. The 72px value in this example is intentionally exaggerated to make the effect easy to see. For most forms, start with 16px or 24px.

Field width

1. Select a Text field.
2. On Main or Style, set Full width or width options.
3. In a two-column row, keep both columns a similar width.

Preview check

Use the same Team profile form in Preview to confirm spacing looks right for end users.

1. Click Preview.
2. Check Desktop and Mobile device modes in the header.
3. Confirm labels align and gaps still read clearly on narrow widths.

Summary

Set spacing on parent layout components first. Use Main for gap values on Stack, then verify the same form in Preview.

See also

• Style tab basics
• Rows, columns, and grids