B2B purchase order modal with tabbed form flow

Summary

A multi-step modal dialog for creating a purchase order, with tabbed navigation, structured form fields, address selection, and real-time order summary.

Visual description

A centered modal overlays a faded background interface. The modal header reads "Create Purchase Order" with a descriptive subtitle below. Three numbered tabs navigate the workflow (Details Shipment, Product Details, Recipient Email). The visible step shows a two-column layout: left column contains form fields for expected delivery date, assign-to dropdown, payment terms dropdown, and a note section with gray placeholder text; the center-to-right area displays three warehouse address options with map pin icons, plus a shipment method selector (Fedex / USPS). A right sidebar panel titled "Other Information" summarizes delivery date, assigned person, payment terms, and address. Below that, a "Products" section shows an empty state with a document icon. A footer "Summary" table displays Subtotal, Total Qty, Tax, and Total with right-aligned values. Two buttons appear at bottom right: Cancel and a prominent orange "Next" button. The design relies on generous white space, left-aligned labels, light gray dividers, and subtle icon indicators for scannable data entry.

Key takeaway

The two-column form layout with auxiliary information in a fixed sidebar, the use of address cards as selectable regions rather than simple dropdowns, the visual hierarchy created by separating input sections and summary areas with whitespace instead of borders, and the prominent action button color contrasting the neutral palette.

Reuse notes

Use for complex B2B workflows requiring data entry, address selection, and running totals. The pattern works well when forms span multiple screens or require users to reference shipping, billing, and product details simultaneously. The green accent color can be swapped for any primary action color.