form settings account inputs fieldset form settings account inputs preferences notifications account settings form multi-section form layout
Settings Form
Fetch pattern JSON:
curl https://webspire.de/patterns/forms/base.json base.html
<section class="ws-forms bg-[var(--ws-forms-bg)] py-20">
<div class="mx-auto max-w-2xl px-6">
<div class="mb-8">
<h2 class="text-2xl font-bold text-[var(--ws-forms-text)]">Account Settings</h2>
<p class="mt-2 text-[var(--ws-forms-label)]">Update your personal information and preferences.</p>
</div>
<form class="space-y-10">
<!-- Personal Information -->
<fieldset>
<legend class="text-sm font-semibold uppercase tracking-wider text-[var(--ws-forms-label)]">Personal Information</legend>
<div class="mt-4 grid grid-cols-1 gap-5 sm:grid-cols-2">
<div>
<label for="form-first" class="block text-sm font-medium text-[var(--ws-forms-label)]">First name</label>
<input type="text" id="form-first" name="first-name" autocomplete="given-name"
class="mt-1.5 block w-full rounded-lg border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]">
</div>
<div>
<label for="form-last" class="block text-sm font-medium text-[var(--ws-forms-label)]">Last name</label>
<input type="text" id="form-last" name="last-name" autocomplete="family-name"
class="mt-1.5 block w-full rounded-lg border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]">
</div>
<div class="sm:col-span-2">
<label for="form-email" class="block text-sm font-medium text-[var(--ws-forms-label)]">Email</label>
<input type="email" id="form-email" name="email" autocomplete="email"
class="mt-1.5 block w-full rounded-lg border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]">
</div>
</div>
</fieldset>
<hr class="border-[var(--ws-forms-input-border)]">
<!-- Preferences -->
<fieldset>
<legend class="text-sm font-semibold uppercase tracking-wider text-[var(--ws-forms-label)]">Preferences</legend>
<div class="mt-4 space-y-4">
<div>
<label for="form-timezone" class="block text-sm font-medium text-[var(--ws-forms-label)]">Timezone</label>
<div class="relative">
<select id="form-timezone" name="timezone"
class="mt-1.5 block w-full appearance-none rounded-lg border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3.5 pr-10 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]">
<option>UTC (GMT+0)</option>
<option>CET (GMT+1)</option>
<option>EST (GMT-5)</option>
<option>PST (GMT-8)</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<svg class="h-4 w-4 text-[var(--ws-forms-label)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
</div>
</div>
</div>
<div>
<label for="form-bio" class="block text-sm font-medium text-[var(--ws-forms-label)]">Bio</label>
<textarea id="form-bio" name="bio" rows="3"
class="mt-1.5 block w-full rounded-lg border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-forms-text)] placeholder:text-[var(--ws-forms-label)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]"
placeholder="A short bio about yourself..."></textarea>
<p class="mt-1.5 text-xs text-[var(--ws-forms-label)]">Max 200 characters.</p>
</div>
</div>
</fieldset>
<hr class="border-[var(--ws-forms-input-border)]">
<!-- Notifications -->
<fieldset>
<legend class="text-sm font-semibold uppercase tracking-wider text-[var(--ws-forms-label)]">Notifications</legend>
<div class="mt-4 space-y-3">
<label class="flex items-center gap-3">
<input type="checkbox" name="notify-email" checked class="h-4 w-4 rounded border-[var(--ws-forms-input-border)] text-[var(--ws-forms-input-focus)] focus:ring-[var(--ws-forms-input-focus)]">
<span class="text-sm text-[var(--ws-forms-label)]">Email notifications</span>
</label>
<label class="flex items-center gap-3">
<input type="checkbox" name="notify-marketing" class="h-4 w-4 rounded border-[var(--ws-forms-input-border)] text-[var(--ws-forms-input-focus)] focus:ring-[var(--ws-forms-input-focus)]">
<span class="text-sm text-[var(--ws-forms-label)]">Marketing updates</span>
</label>
<label class="flex items-center gap-3">
<input type="checkbox" name="notify-security" checked class="h-4 w-4 rounded border-[var(--ws-forms-input-border)] text-[var(--ws-forms-input-focus)] focus:ring-[var(--ws-forms-input-focus)]">
<span class="text-sm text-[var(--ws-forms-label)]">Security alerts</span>
</label>
</div>
</fieldset>
<!-- Actions -->
<div class="flex justify-end gap-3 border-t border-[var(--ws-forms-input-border)] pt-6">
<button type="button" class="rounded-lg border border-[var(--ws-forms-input-border)] px-5 py-2.5 text-sm font-medium text-[var(--ws-forms-label)] transition hover:bg-white/5">Cancel</button>
<button type="submit" class="rounded-lg bg-[var(--ws-forms-action-bg)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-forms-action-text)] transition hover:brightness-110">Save changes</button>
</div>
</form>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
formsettingsaccountinputsfieldset
Slots
| Name | Required | Description |
|---|---|---|
| personal | Yes | Personal information fieldset. |
| preferences | Yes | Preferences fieldset with selects and textarea. |
| notifications | No | Notification toggle checkboxes. |
| actions | Yes | Cancel and save buttons. |
Multi-section form with three fieldsets: personal info, preferences, and notifications. Uses <fieldset> and <legend> for semantic grouping. Separated by horizontal rules. Action buttons are right-aligned.