Complex Form
A dense form with grouped sections, multiple field types, and a sticky action bar. Use it for detailed settings, account creation, or admin record editing.
A dense form with grouped sections, multiple field types, and a sticky action bar. Use it for detailed settings, account creation, or admin record editing.
Search blocks by description or jump to a page.
Complex Form is a card-wrapped product listing form. A card header holds the title, and the body is divided into three named sections separated by rules: Basic Information, Product Media, and Additional Options. The first section contains a text input for the product name, a category select, and a radio group for availability status. The second section is a dashed upload zone that shows a cloud icon and drag-and-drop instructions until a file is chosen, then replaces the placeholder with a live image preview. The third section presents four checkboxes in a two-column grid for tagging the product as featured, on sale, a new arrival, or exclusive. A row of Cancel and Create Product buttons sits flush to the right edge below all three sections.
Each section is independent. You can rewrite the labels, swap the category options, add or remove checkboxes, or drop an entire section without affecting the others. The upload zone and the radio group work the same way regardless of how many fields surround them.
Reach for this block when an operator or agent needs to submit a record with several distinct categories of information at once. On a real estate marketplace it fits a new listing flow where an agent enters property details, uploads photos, and sets availability and feature flags in a single pass rather than across a multi-step wizard. It handles more fields than the Stacked variant without needing the wider screen that Two Column assumes.
A natural flow around it on an Application page:
Before
After
The form suits any flow that groups related fields into named sections. A few ways to use the structure:
Tip: keep the checkbox grid to four or six items so the two-column layout stays balanced and the section does not visually outweigh the others.