---
title: "Gather every setting on one settings page · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/layout-and-navigation/settings-page
id: APP-84
level: Recommended
updated: 2026-10-22
build: a2a6bdfed830
tokens: 781
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Gather every setting on one settings page

For AI agents: the [site map](https://agentwranglers.se/llms.txt) lists everything here, and this page sits under [Layout and navigation](https://agentwranglers.se/playbook/app-ui/layout-and-navigation.md).

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers.md). Updated 2026-10-22.

- ID: APP-84
- Level: Recommended
- Chapter: [Layout and navigation](https://agentwranglers.se/playbook/app-ui/layout-and-navigation.md)
- Rule: Put every setting a person or an admin can change on one settings area, grouped by subject, with a search field. Save each change visibly and say who it affects.
- Check: A test reads the settings schema. Every setting has a section, a label and a page that shows it. A browser test searches for each setting label and finds its control.
- How: Settings scattered across screens get changed twice or never found. Group them into sections, such as profile, notifications, security and billing, each at its own address, as [Keep screen state in the address](https://agentwranglers.se/playbook/app-ui/client-and-server-state/state-in-url.md) says. Generate the list from one schema of settings, so a new setting cannot be forgotten. Say when a setting affects the whole organisation rather than one person. Confirm each save in place, and keep risky ones behind [Let people undo or confirm destructive actions](https://agentwranglers.se/playbook/app-ui/feedback-and-dialogs/confirm-or-undo.md).

## Examples

**Using these examples:** they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

### JavaScript example

```js
export const SETTINGS = [
  { key: 'notifications.email', section: 'notifications', label: 'Email me about new invoices', scope: 'user' },
  { key: 'billing.currency', section: 'billing', label: 'Billing currency', scope: 'organisation' },
];
```

### Python example

```python
def test_every_setting_has_a_home():
    for setting in SETTINGS:
        assert setting["section"] in SECTIONS and setting["label"], setting["key"]
```

## Related rules

- APP-31 [Keep screen state in the address](https://agentwranglers.se/playbook/app-ui/client-and-server-state/state-in-url.md) in Web app interface
- APP-44 [Let people undo or confirm destructive actions](https://agentwranglers.se/playbook/app-ui/feedback-and-dialogs/confirm-or-undo.md) in Web app interface

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/app-ui/layout-and-navigation/settings-page">Agent Wranglers web app interface playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Offer keyboard shortcuts and a command palette](https://agentwranglers.se/playbook/app-ui/layout-and-navigation/keyboard-shortcuts.md)
- [Layout and navigation](https://agentwranglers.se/playbook/app-ui/layout-and-navigation.md)