Settings Page
设置页
Aliases:设置页面设置面板偏好设置系统设置页账号设置配置页面个人设置
What is it
A utility page for managing account preferences and system configuration: a stable settings nav on one side (general, notifications, security…), and rows of "label + control + hint" forms on the other — low-frequency edits, saved as they change. Organized by configuration domain rather than task flow; users locate sections by scanning titles, change, and leave.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Central management of profile, notifications, security
- Many options that need sectioned navigation
- Edits are infrequent but the entry must stay reachable
✕ When not to use
- High-frequency task flows — put them in the working surface
- Minimal products with two or three toggles — fold into a menu
- Approval workflows that need admin review
Variants
Sidebar Settings
侧栏导航设置
Sectioned nav left, forms right — the common default
Tabbed Settings
标签页设置
Top tabs switch domains — good for few sections
Sectioned Single Page
分组单页
All sections scroll vertically on one page
Modal Settings
弹窗设置
Lightweight settings in a modal, no page exit
Page structure
- 01
Settings nav
Grouped by section, marking the active one.
- 02
Sections
One category of settings per section with a clear title and description.
- 03
Form rows
Label, control and help text; pick instant or batched saving, not both.
- 04
Danger zone
Irreversible actions isolated in red with a second confirmation.
- 05
Save bar
Appears when dirty, making the unsaved state explicit.
Implementation
flexgridposition: stickyscroll-margin-top: 6remSidebar variant: sticky nav, content renders row-style forms per section (label left, control right). The single-page variant links anchors with scroll-margin and highlights the active section. Toggles are controlled switches; when unsaved changes exist, a sticky bottom save bar appears. Isolate the danger zone at the end with red borders and a confirm dialog.
Related concepts
A vertical navigation area pinned to one side of the page (usually the left), carrying the primary hierarchy of a product. The de facto standard of admin systems: brand and global search on top, module tree in the sidebar, content focused on the task.
ComponentsContainsA thumb sliding on a track represents a binary setting that takes effect immediately, no confirmation needed. Thumb travel and track color change together signal the state, with an on/off text hint beside or inside — the standard control of settings pages.
ComponentsContainsA single-line bordered field for collecting text — the basic unit of every form. Placeholder hints the expected format, focus highlights the border to guide the eye, and failed validation switches to an error color with a hint. Prefix and suffix icons or a clear button can live inside, and the value is controlled state.
ComponentsContainsA row of switchable labels that divide one region into mutually exclusive views: the tab headers stay visible and clickable, and only the active tab's panel shows while the rest stay hidden. Packs several tightly related contents into one area to switch in place instead of full-page navigation. Arrow-key navigation between tabs makes it a classic accessibility showcase.
ComponentsContainsA small message bar that appears in a viewport corner and dismisses itself, reporting an operation result (saved, copied, upload done). Non-blocking, usually with one action (undo, view), lingering for about 3–5 seconds before fading out.
ComponentsContains