Form structure and containers

A form is more than a flat list of fields. Containers group related inputs to help users scan sections such as contact details, ticket options, and payment information.

Layout building blocks

Names depend on your Component library.

Example: event registration form

This walkthrough builds a small Event registration form with two Card sections: Contact details and Ticket options.

Step 1: Add a Card container

1. Open Components.
2. Search for Card.
3. Drag Card onto the canvas under the form title.

Step 2: Nest a Stack inside the Card

1. Search for Stack in Components.
2. Drag Stack into the Card drop zone.
3. Add a Typography row for the section title (for example Contact details).

Step 3: Add fields inside the Stack

1. Drag Text field components into the Stack.
2. Add Full name, Email, and Phone.
3. Repeat steps 1–3 for a second Card named Ticket options with Ticket type and Quantity.

Step 4: Check the canvas

Confirm each section is visually grouped and fields sit inside their container.

Step 5: Verify in Tree

1. Open Tree → Expand all.
2. Each Card row should wrap a Stack and its Text field children.

Summary

Group fields with layout containers before fine-tuning style. Tree shows parent/child relationships clearly.

See also

• Parent and child in the Tree
• Nested components (developers)