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="/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>

<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>

<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>

<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

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">
  
  <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>

<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>
        
      </section>
    </div>
  </main>
</body>

Sidebar Navigation Styles

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">
  
  <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>

<div role="tabpanel" class="tab-panel" id="panel-account"
       aria-labelledby="tab-account">
    
  </div>

Tab Styles

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".

Configuration

Settings patterns use these layout elements and attributes:

Page Layout

Attribute	Values	Description
`data-page-layout`	`sidebar-left`	Creates a sidebar + main content layout for settings navigation.
`data-layout-sidebar-width`	`narrow` `normal` `wide`	Controls the width of the settings sidebar. Use `narrow` for icon + text nav.
`data-layout-gap`	`none` `xs` `s` `m` `l` `xl`	Gap 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-selected`	Tab buttons	Indicates which tab is currently active.
`aria-controls`	Tab buttons	Links tab to its associated panel.
`aria-labelledby`	Tab 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 resets
Form validation: Show validation errors inline near the relevant field, not at the top of the page
Save states: Provide clear feedback when settings are saved; consider auto-save for simple toggles
Section organization: Group settings logically by category; put most-used settings first
Keyboard navigation: Tabs should support arrow key navigation between tabs, and Enter/Space to activate
Loading states: Show skeleton placeholders while loading settings to prevent layout shift
Confirmation dialogs: Confirm before destructive actions like account deletion or password changes
Deep linking: Support URL fragments or query params to link directly to specific settings sections
Mobile considerations: Convert sidebar nav to a dropdown or stacked layout on small screens

Welcome to Vanilla Breeze