form two-column settings onboarding setup form two column setup workspace onboarding settings two column settings form workspace setup form with side panel
Form Two Column
Fetch pattern JSON:
curl https://webspire.de/patterns/forms/two-column.json two-column.html
<section class="ws-forms bg-[var(--ws-forms-bg)]">
<div class="mx-auto max-w-5xl px-4 py-10 sm:px-6 lg:px-8">
<form class="overflow-hidden rounded-2xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-bg)] shadow-sm">
<div class="border-b border-[var(--ws-forms-input-border)] px-6 py-5">
<h2 class="text-lg font-semibold text-[var(--ws-forms-text)]">Workspace details</h2>
<p class="mt-1 text-sm text-[var(--ws-forms-label)]">Use a wider two-column layout for setup flows with grouped information.</p>
</div>
<div class="grid gap-0 lg:grid-cols-[0.9fr_1.1fr]">
<div class="border-b border-[var(--ws-forms-input-border)] bg-black/[0.02] px-6 py-6 lg:border-b-0 lg:border-r">
<h3 class="text-sm font-semibold uppercase tracking-[0.16em] text-[var(--ws-forms-label)]">Setup notes</h3>
<ul class="mt-4 space-y-3 text-sm text-[var(--ws-forms-label)]">
<li>Keep internal naming and public naming separate.</li>
<li>Choose one owner for billing and one for daily operations.</li>
<li>Use support email aliases instead of personal inboxes.</li>
</ul>
</div>
<div class="px-6 py-6">
<div class="grid gap-5 sm:grid-cols-2">
<div>
<label for="workspace-name" class="block text-sm font-medium text-[var(--ws-forms-text)]">Workspace name</label>
<input id="workspace-name" type="text" placeholder="Acme Labs" class="mt-1.5 w-full rounded-lg border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-forms-input-focus)]/15" />
</div>
<div>
<label for="workspace-slug" class="block text-sm font-medium text-[var(--ws-forms-text)]">Workspace URL</label>
<input id="workspace-slug" type="text" placeholder="acme-labs" class="mt-1.5 w-full rounded-lg border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-forms-input-focus)]/15" />
</div>
<div>
<label for="owner-name" class="block text-sm font-medium text-[var(--ws-forms-text)]">Owner name</label>
<input id="owner-name" type="text" placeholder="Maya Chen" class="mt-1.5 w-full rounded-lg border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-forms-input-focus)]/15" />
</div>
<div>
<label for="owner-email" class="block text-sm font-medium text-[var(--ws-forms-text)]">Owner email</label>
<input id="owner-email" type="email" placeholder="maya@acme.io" class="mt-1.5 w-full rounded-lg border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-forms-input-focus)]/15" />
</div>
<div class="sm:col-span-2">
<label for="workspace-description" class="block text-sm font-medium text-[var(--ws-forms-text)]">Description</label>
<textarea id="workspace-description" rows="4" placeholder="What is this workspace used for?" class="mt-1.5 w-full rounded-lg border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-forms-input-focus)]/15"></textarea>
</div>
</div>
<div class="mt-6 flex justify-end gap-3">
<button type="button" class="rounded-lg border border-[var(--ws-forms-input-border)] px-4 py-2.5 text-sm font-medium text-[var(--ws-forms-text)]">Cancel</button>
<button type="submit" class="rounded-lg bg-[var(--ws-forms-action-bg)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-forms-action-text)]">Save workspace</button>
</div>
</div>
</div>
</form>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
formtwo-columnsettingsonboardingsetup
Slots
| Name | Required | Description |
|---|---|---|
| guidance | No | Side panel for notes, setup guidance, or requirements. |
| fields | Yes | Main two-column field grid with actions. |
Two-column application form for setup, onboarding, and account configuration. Pairs a guidance rail with a denser field grid so forms can carry more context without collapsing into a single narrow column.