Settings Form Two Col
Two column settings form with label and helper text on the left and the field on the right, with a save bar.
Two column settings form with label and helper text on the left and the field on the right, with a save bar.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Settings Form Two Col is the canonical settings-page form pattern: left column holds the label and helper text, right column holds the field, four rows divided by rules. Workspace name (Acme) and support email (support@acme.com) are text inputs. Timezone (Europe / Berlin, UTC+02:00) and session timeout (8 hours) are selects. The sticky save bar carries a workspace-wide warning and the Save changes button.
Rows live in a typed const array with a type discriminant that branches input vs select. The helper text on session timeout names the security benefit; that line is what stops the why is this here support question.
Reach for this block on any settings page that has more than two fields, wired to your settings read and write endpoints. The two-column split works from sm breakpoint up; below it stacks to single column automatically.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the workspace general settings panel. Other two-col form surfaces:
Tip: the helper text column is load-bearing; removing it to save space makes every field require documentation.