Anatomy of a Settings Page
Well-designed settings pages share a common anatomy (grouped sections, labelled controls, and a clear save action) that helps users find and change options with confidence.
File extensions: .html
Every part of the example below is labelled and explained. This page is one of 55 annotated tours on AnatomyOf, a free, open-source project by LunarWerx Studios .
What is inside a Settings Page page
Page header The title bar that tells users where they are.
The header names the screen ("Settings") and often adds a one-line description of its scope. It orients users the moment the page loads and anchors the whole layout. It frequently also holds the account avatar or a global save state. Keep the title short and match it to the entry point users clicked to get here.
Category navigation The list of setting categories that splits a big page into sections.
Once a settings screen grows past a handful of options, a category list (a sidebar or tabs) breaks it into digestible groups like Account, Notifications, and Privacy. It keeps each panel short and scannable. Mark the current category as selected, and order categories by how often they are used. For long lists, a search box on top beats making users hunt.
Settings group A titled section that clusters related options together.
Grouping related settings under a heading (e.g. "Profile", "Notifications") reduces cognitive load: users scan headings, not individual rows. Each group is usually a <section> with its own heading. Good grouping mirrors the user’s mental model, not the database schema. Keep groups focused; if one grows huge, it probably wants to become its own category.
Setting row A single option: a label paired with its control.
The atomic unit of a settings page is a row: a descriptive label on one side and the control that changes it on the other. Associating the <label> with its control (via for/id) makes the whole label clickable and readable by screen readers. Consistent alignment across rows (labels left, controls right) lets users scan down the column and find what they need fast.
Toggle / switch An on/off control for a single binary setting.
A toggle switch represents an immediate binary choice (on or off) and by convention applies the change instantly, without a separate save. Its state should be obvious at a glance from color and knob position. Use toggles for independent on/off settings; use checkboxes when options are part of a list being submitted together, and radio buttons for mutually exclusive choices.
Dropdown / select A control for choosing one option from a fixed list.
A select (dropdown) is right when there is one choice among several known, mutually exclusive options: a language, a timezone, a plan. It stays compact by hiding the options until opened. If there are only two or three choices, inline radio buttons are often clearer since they show all options at once. Always provide a sensible default.
Help text A short hint that clarifies what a setting does.
Secondary help text under a label explains consequences a user cannot infer from the label alone ("Used across the interface", "Others can see this"). It prevents mistakes without cluttering the primary label. Keep it to a sentence, tie it to the specific control (via aria-describedby for assistive tech), and reserve it for settings whose effect is genuinely unclear.
Danger zone A visually separated area for destructive, irreversible actions.
Destructive actions (delete account, revoke access, reset data) are corralled into a visually distinct "danger zone", usually with red accents and separation from everyday settings, so they are not triggered by accident. Pair them with a confirmation step (a dialog or a typed confirmation) because they are hard or impossible to undo. Distance and color together signal "think before you click".
Action bar The Save / Cancel buttons that commit or discard changes.
When settings are saved together rather than instantly, a persistent action bar with primary "Save" and secondary "Cancel" buttons commits or discards the batch. The primary action is visually dominant; cancel is quiet. Disable Save until something actually changes, and warn before navigating away with unsaved edits. Instant-apply controls like toggles usually sit outside this deferred-save flow.
Official Settings Page site · All languages on AnatomyOf
Every language on AnatomyOf
Concept tours
The interactive tour needs JavaScript. Enable it to hover a callout and trace it into the code.