Skip to Content
StyleguidePatternsForms

Forms

The forms an internal tool is mostly made of, at the size they appear in an app. Every one is interactive — submit with fields empty, edit a setting, change a filter — so you can see the validation, dirty, loading and empty states the theme gives you without writing any styles.

Create a record

Sections with a title and description on the left and a two-column field grid on the right; errors appear only after the first submit, and the footer sticks to the bottom of the card while the form scrolls.

Purchase orders / New

New purchase order

Orders over $10,000 need approval before they are sent to the supplier.

Draft
Supplier

Who you are buying from and what the order is for.

Their quote or invoice number

Amount & delivery

What it costs, when it arrives and who pays for it.

Approval

Routing and notifications once the order is created.

Approver is notified immediately

Fields marked * are required

Create recordCard padding=0 with section rows (title + description left, two-column field grid right). Required fields use withAsterisk; errors appear after Create order via the error prop. The footer is position: sticky inside the scrolling card. The date field is a TextInput with a calendar icon here; the datetime interface renders a picker.

Relational fields

Buildpad’s signature controls: a many-to-one value in a bordered card, and related-record lists you can reorder, add to and remove from — every change is staged until the parent record saves.

Supplier *

Atlas Packaging

Packaging · 2 orders

Parent order

Link a blanket order this one draws from.

No item selected

Many-to-one · select-dropdown-m2oBordered Paper with the display template, then view, change and remove ActionIcons. Change opens a Modal size="xl" picker; remove leaves the empty state with a light Select Item button.

Supplier *

No item selected

Choose a supplier

Supplier

Keystone Logistics

Freight · 1 order

Many-to-one · error and read-onlyerror renders as red xs text under the field. readOnly and disabled look the same: the value and its view link stay, the edit actions go.

Line items *

4 items

Double-wall cartons 600×400

1,200 × $5.40 · $6,480

In stock

Kraft paper void fill

40 × $59.00 · $2,360

In stock

Custom printed tape

160 × $15.50 · $2,480

Backordered

Pallet stretch wrap

32 × $47.50 · $1,520

In stock
One-to-many · list-o2mEach related item is a bordered row: grip handle (drag it, or focus it and press ↑/↓), display template, status Badge, open and remove. Edits are staged until the parent saves — new rows get a New badge, removed rows strike through with undo, and the count shows unsaved changes. Create New opens a Drawer; Add Existing opens the picker.

Approvers

Everyone listed must approve before the order is sent.

2 items

PR

Priya Raman

Approver · Finance

Active
AH

Amelia Hart

Administrator · Platform

Active
Many-to-many · list-m2mJunction rows show the related record: an Avatar, name and role, with the user's status badge. Add Existing excludes people already linked.

Watchers

People notified when this order changes.

No related items

EmptyWith nothing linked the count disappears and the list reads No related items under its actions.

Linked records

3 items

Orders

PO-2041 · Atlas Packaging

$12,840

Pending approval
Users

Daniel Osei

Editor · Fulfilment

Files

atlas-packaging-quote.pdf

312 KB · PDF

Many-to-any · list-m2a, read-onlyRows from different collections carry a color="blue" collection badge. readOnly drops the grip, remove and add controls but keeps each row's open link.

PO-2041 · Atlas Packaging

Pending approval · due 04 Nov

Approvers

2 items

PR

Priya Raman

Approver · Finance

Active
AH

Amelia Hart

Administrator · Platform

Active
Add Existing picker · static previewModal size="xl" titled Select Items: search resets to page 1, the header Checkbox selects the page (indeterminate when partial), selected rows tint --ds-primary-50, and the ink button counts the selection. Linked records are filtered out.

File upload

The shipped upload field: a dashed drop zone, a queue that shows progress, success and failure per file, and a picker for files already in the library.

Drag files here or click to select

PDF, images or spreadsheets, up to 25 MB each

Drop zone · idleDashed Paper p="xl" with default-variant buttons, as the shipped Upload interface renders it. Drag a file over it, or use Upload from device — files join the queue below.

Drop files here

PDF, images or spreadsheets, up to 25 MB each

Drop zone · drag-overWhile a file is over it the border turns --ds-primary-500 on a --ds-primary-50 wash, the icon goes ember and the copy changes to Drop files here.

freight-contract-2026.pdf

2.4 MB of 4.1 MB

dock-3-after.jpg

1.8 MB

Uploaded

supplier-scorecard.xlsx

220 KB

Uploaded

site-survey-walkthrough.mov

18.6 MB

Upload failed — the connection was interrupted.

Upload queueOne row per file: type icon or image thumbnail, name, size, then a Progress bar with cancel, a green Uploaded check, or a red message with Retry. Over-limit files fail without a retry. The shipped field also raises a toast on completion or failure (@mantine/notifications, not shown here).

Uploading...

Drop zone · uploadingThe whole zone swaps to a large Loader while a batch is sent.

Drag files here or click to select

PDF, images or spreadsheets, up to 25 MB each

Drop zone · disabledDisabled buttons, ignored drops and a dimmed zone.

PO-2041 · Atlas Packaging

Attachments

Drag files here or click to select

PDF, images or spreadsheets, up to 25 MB each

Choose from library · static previewModal size="xl" with a search field, an icon-only SegmentedControl (visually hidden labels) for grid or list, a folder breadcrumb and keyboard-focusable cards — folders open, files select. Images show their thumbnail; everything else a gray light ThemeIcon.

Settings

One setting per row — label and description left, control right — split by dividers. The footer tells you when there are unsaved changes and stays disabled until there are.

Workspace

Applies to everyone in Northwind Ops.

Workspace name

Shown in the sidebar, emails and exports.

Workspace URL

Changing it breaks existing bookmarks.

.buildpad.app

Default currency

Used for new orders and reports.

Approval threshold

Orders above this amount need an approver.

Time zone

Due dates and cron jobs run in this zone.

Weekly digest

A Monday summary of spend and open approvals.

Require two-factor

Members must set up 2FA at their next sign-in.

Single sign-on

Sign in with your identity provider.

Business plan

All changes saved

Settings rowsTwo-column rows (Text fw=600 + dimmed description, control right) separated by Divider. Edit anything to arm the footer; the disabled row shows a plan-gated control.

Filter bar

Search plus the two or three filters people use most, with everything else behind a popover. Active filters repeat as removable pills so the current view is always explained.

Filtered by

Owner: Daniel OseiCategory: Packaging

Showing 2 of 7 orders

OrderSupplierCategoryOwnerStatusAmount
PO-2041Atlas PackagingPackagingDaniel Osei
Pending approval
$12,840
PO-2035Atlas PackagingPackagingDaniel Osei
Shipped
$15,300
Filter barTextInput search, two clearable Selects, a Popover for less-used filters (count in a Badge), then active filters as removable Pills with a Clear all. Filters really narrow the table.
More filters — openPopover opened withinPortal=false — the dropdown surface (radius lg, shadow lg, hairline border) comes from the theme; hideDetached=false keeps it visible while the trigger scrolls. Controls inside drop to size="xs".
Status: CancelledOver $20,000

No orders match these filters

Try removing a filter or searching for something else.

No matching resultsWhen filters exclude everything, keep the chips visible and offer one way out — a variant="default" Clear filters button.

Multi-step

For long, ordered tasks. Next validates only the current step; completed steps stay clickable.

Confirmations are sent here

Step 1 of 4

Multi-step formStepper with allowNextStepsSelect=false: completed steps turn ember and stay clickable. Next validates only the current step — the delivery step starts empty so you can see it block.

Sign in & sign up

Compact, single-column auth forms. The ink button is the default action; the ember color="primary" button is kept for brand moments like creating an account.

Sign in

Welcome back to Northwind Ops.

Forgot password?
Sign inInk Button fullWidth with loading while submitting. Empty password shows a field error; fewer than 8 characters returns a form-level Alert.

Create your account

You've been invited to the Procurement team.

Enter a full email address, like name@northwind.io

At least 8 characters

A number

An uppercase letter

A symbol

Create accountcolor="primary" — the ember brand CTA, reserved for moments like sign-up. Strength is a Progress whose colour follows the score; the button stays enabled and validates on click.

Invite & confirm

Collecting many values in one field, and slowing people down before something irreversible.

Invite people

They'll get an email with a link to join Northwind Ops.

Press Enter or comma after each address

marco.silva@northwind.iolena@northwind

lena@northwind is not a valid email address

MS

marco.silva@northwind.io

Editor · invited 2 days ago

Invite peopleTagsInput splits on comma, space or semicolon and errors on invalid addresses; the role Select uses renderOption for descriptions. Send stays disabled while anything is invalid.

Delete supplier

Removes the supplier and everything attached to it.

Type to confirmDanger Alert + a confirmation TextInput; the color="red" button unlocks only on an exact match. The same fields work inside a Modal.

Validation states

Summarise every problem at the top of a long form and link each one to its field; repeat the message on the field itself. The field states on the right are everything an input can show.

Supplier reference is already used by PO-2031

Amount must be greater than $0

Choose an approver

Error summaryA color="red" Alert at the top of the form lists every problem as an anchor that focuses its field; each field repeats its own message via error. Warnings that don't block saving use color="yellow".

Shown under the label

Supplier names are case-sensitive

Checking the number is free…

Available

Field statesDefault, with description, focus (click any field — ember border + --ds-focus-ring), error, async check via a Loader in rightSection, readOnly and disabled.
Last updated on
LayoutData views