Patterns Settings
Settings
Settings page patterns with grouped sections, sidebar navigation, and tabbed interfaces for application preferences and configuration.
Overview
Settings patterns provide organized interfaces for managing user preferences, account configuration, and application options. These layouts scale from simple single-page forms to complex multi-section configurations.
Key features:
Grouped sections with fieldset and legend for logical organization
Sidebar navigation for multi-page settings with persistent nav
Tab-based organization for compact, single-page layouts
Toggle switches and radio groups for preference selection
Clear save/cancel actions with form validation
Grouped Sections
A straightforward settings layout using fieldset sections with legend headings. Each section groups related settings together, making it easy to scan and understand the form structure.
<section data-layout="center" data-layout-max="normal">
<form action="/vanilla-breeze/settings" method="POST" data-layout="stack" data-layout-gap="xl">
<header data-layout="stack" data-layout-gap="xs">
<h1>Settings</h1>
<p class="text-muted">Manage your account settings and preferences.</p>
</header>
<!-- Profile Section -->
<fieldset>
<legend>Profile</legend>
<div data-layout="stack" data-layout-gap="l">
<form-field>
<label for="name">Full name</label>
<input type="text" id="name" name="name" value="John Doe"/>
</form-field>
<form-field>
<label for="email">Email address</label>
<input type="email" id="email" name="email" value="john@example.com"/>
</form-field>
<form-field>
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="4"></textarea>
</form-field>
</div>
</fieldset>
<!-- Notifications Section -->
<fieldset>
<legend>Notifications</legend>
<div data-layout="stack" data-layout-gap="m">
<label>
<input type="checkbox" name="notify_comments" checked/>
<span>Comments on your posts</span>
</label>
<label>
<input type="checkbox" name="notify_mentions" checked/>
<span>Mentions by other users</span>
</label>
</div>
</fieldset>
<!-- Privacy Section -->
<fieldset>
<legend>Privacy</legend>
<div data-layout="stack" data-layout-gap="m">
<label>
<input type="radio" name="visibility" value="public"/>
<span>Public - Anyone can view your profile</span>
</label>
<label>
<input type="radio" name="visibility" value="private" checked/>
<span>Private - Only approved followers</span>
</label>
</div>
</fieldset>
<footer data-layout="cluster" data-layout-justify="end" data-layout-gap="m">
<button type="button" class="secondary">Cancel</button>
<button type="submit">Save changes</button>
</footer>
</form>
</section>
Section Fieldset Styles
fieldset {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-l);
padding: var(--size-l);
}
fieldset legend {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
padding: 0 var(--size-xs);
}
Sidebar Navigation
A settings layout with persistent sidebar navigation for applications with many configuration sections. The sidebar provides quick access to different settings categories while the main area displays the selected section.
<body data-page-layout="sidebar-left" data-layout-gap="none" data-layout-sidebar-width="narrow">
<!-- Settings Navigation -->
<nav class="settings-nav" aria-label="Settings navigation">
<h2>Settings</h2>
<ul data-layout="stack" data-layout-gap="xs">
<li>
<a href="#" aria-current="page">
<icon-wc name="cog"></icon-wc>
General
</a>
</li>
<li>
<a href="#">
<icon-wc name="shield-check"></icon-wc>
Security
</a>
</li>
<li>
<a href="#">
<icon-wc name="bell"></icon-wc>
Notifications
</a>
</li>
<li>
<a href="#">
<icon-wc name="credit-card"></icon-wc>
Billing
</a>
</li>
<li>
<a href="#">
<icon-wc name="puzzle-piece"></icon-wc>
Integrations
</a>
</li>
</ul>
</nav>
<!-- Settings Content -->
<main class="settings-content">
<div data-layout="stack" data-layout-gap="xl">
<header>
<h1>General Settings</h1>
<p class="text-muted">Manage your account preferences.</p>
</header>
<section class="settings-section">
<h2>Account Information</h2>
<!-- Form fields -->
</section>
</div>
</main>
</body>
Sidebar Navigation Styles
.settings-nav {
background: var(--color-surface);
border-inline-end: 1px solid var(--color-border);
padding: var(--size-l);
min-block-size: 100vh;
}
.settings-nav h2 {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
margin: 0 0 var(--size-m) var(--size-s);
}
.settings-nav a {
display: flex;
align-items: center;
gap: var(--size-s);
padding: var(--size-s) var(--size-m);
color: var(--color-text-muted);
text-decoration: none;
border-radius: var(--radius-m);
transition: color var(--duration-fast) var(--ease-default),
background var(--duration-fast) var(--ease-default);
}
.settings-nav a:hover {
color: var(--color-text);
background: var(--color-surface-raised);
}
.settings-nav a[aria-current="page"] {
color: var(--color-interactive);
background: var(--color-interactive-muted);
font-weight: var(--font-weight-medium);
}
Tab Navigation
A compact settings layout using tabs for section navigation. This pattern works well when settings fit on a single page and users need to switch between a few main categories quickly. Toggle switches use VB's built-in <input data-switch> for on/off settings.
<div class="settings-card">
<!-- Tab List -->
<div role="tablist" class="tab-list" aria-label="Settings sections">
<button role="tab" class="tab" id="tab-account"
aria-selected="true" aria-controls="panel-account">
Account
</button>
<button role="tab" class="tab" id="tab-security"
aria-selected="false" aria-controls="panel-security" tabindex="-1">
Security
</button>
<button role="tab" class="tab" id="tab-notifications"
aria-selected="false" aria-controls="panel-notifications" tabindex="-1">
Notifications
</button>
<button role="tab" class="tab" id="tab-billing"
aria-selected="false" aria-controls="panel-billing" tabindex="-1">
Billing
</button>
</div>
<!-- Tab Panels -->
<div role="tabpanel" class="tab-panel" id="panel-account"
aria-labelledby="tab-account">
<!-- Account settings form -->
</div>
<div role="tabpanel" class="tab-panel" id="panel-security"
aria-labelledby="tab-security" hidden>
<!-- Security settings -->
</div>
</div>
Tab Styles
.tab-list {
display: flex;
gap: 0;
list-style: none;
padding: 0;
margin: 0;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
.tab {
padding: var(--size-m) var(--size-l);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: var(--color-text-muted);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
margin-bottom: -1px;
}
.tab:hover {
color: var(--color-text);
background: var(--color-surface-raised);
}
.tab[aria-selected="true"] {
color: var(--color-interactive);
border-bottom-color: var(--color-interactive);
}
.tab-panel {
padding: var(--size-l);
}
.tab-panel[hidden] {
display: none;
}
Toggle Switches
Use VB's built-in <input type="checkbox" data-switch> for toggle settings — no custom CSS needed. Size variants are available with data-switch="sm" and data-switch="lg".
<!-- Default toggle -->
<input type="checkbox" data-switch name="email_notifications"
aria-labelledby="email-notifications-label"/>
<!-- Small toggle -->
<input type="checkbox" data-switch="sm" name="compact_toggle"/>
<!-- Large toggle -->
<input type="checkbox" data-switch="lg" name="prominent_toggle"/>
Configuration
Settings patterns use these layout elements and attributes:
Page Layout
Attribute
Values
Description
data-page-layoutsidebar-leftCreates a sidebar + main content layout for settings navigation.
data-layout-sidebar-widthnarrow normal wideControls the width of the settings sidebar. Use narrow for icon + text nav.
data-layout-gapnone xs s m l xlGap between sidebar and content. Use none for seamless border connection.
Form Structure
Element
Purpose
Usage
<fieldset>Group related settings
Wrap each logical section (Profile, Notifications, Privacy).
<legend>Section heading
Provides accessible label for the fieldset group.
<form-field>Input wrapper
Wraps label, input, and validation messages.
data-layout="stack"Vertical spacing
Apply to any element for vertical spacing with consistent gaps.
Tab Accessibility
Attribute
Element
Description
role="tablist"Tab container
Identifies the tab navigation container.
role="tab"Tab buttons
Identifies each tab button.
role="tabpanel"Content panels
Identifies each tab content area.
aria-selectedTab buttons
Indicates which tab is currently active.
aria-controlsTab buttons
Links tab to its associated panel.
aria-labelledbyTab panels
Links panel to its associated tab for labeling.
Usage Notes
Toggle switches: Use <input type="checkbox" data-switch> for on/off settings — VB provides complete toggle styling with size variants (data-switch="sm", data-switch="lg")Setting rows: Use <hgroup class="tight"> for heading + description pairs in setting rows — provides automatic muted text and margin resetsForm validation: Show validation errors inline near the relevant field, not at the top of the pageSave states: Provide clear feedback when settings are saved; consider auto-save for simple togglesSection organization: Group settings logically by category; put most-used settings firstKeyboard navigation: Tabs should support arrow key navigation between tabs, and Enter/Space to activateLoading states: Show skeleton placeholders while loading settings to prevent layout shiftConfirmation dialogs: Confirm before destructive actions like account deletion or password changesDeep linking: Support URL fragments or query params to link directly to specific settings sectionsMobile considerations: Convert sidebar nav to a dropdown or stacked layout on small screens