Use when implementing expand and collapse content sections.
Use when implementing social activity and updates stream.
Use when implementing conversational AI chat interfaces.
Use when implementing handling AI-specific errors.
Use when implementing loading states for AI operations.
Use when implementing aI-powered autocomplete and suggestions.
| name | account-settings |
| description | Use when implementing user account configuration and preferences. |
| metadata | {"id":"account-settings","category":"authentication","pattern":"Account Settings","source":"uxpatterns.dev","url":"https://uxpatterns.dev/patterns/authentication/account-settings","sourcePath":"apps/web/content/patterns/authentication/account-settings.mdx"} |
User account configuration and preferences
Account Settings is the centralized interface where authenticated users manage their account configuration, security preferences, notification settings, and personal data. It serves as the control center for everything related to the user's relationship with the application. A well-organized settings page groups related options logically, confirms destructive actions, and provides clear feedback when changes are saved — all while keeping sensitive operations behind re-authentication.
Use Account Settings to give users control over their account configuration, security, and preferences. Common scenarios include:
references/pattern.md, then choose the smallest viable variation.Do's ✅
aria-live="polite" on the status element<nav> with aria-labelaria-current on the active navigation item
Don'ts ❌Lazy Load Settings Sections
const SecuritySettings = lazy(() => import('./SecuritySettings'));
The Problem: A single "Save all" button at the bottom of the page means users must scroll to save, and it's unclear which changes will be applied.
How to Fix It: Use per-section save buttons. Each section saves independently with its own feedback message.
The Problem: Users can change their email, password, or disable 2FA without proving their identity again, allowing attackers with session access to take over the account.
How to Fix It: Require the current password (or 2FA code) before allowing changes to email, password, security settings, or account deletion.
The Problem: A single click on "Delete account" permanently destroys the account without warning.
How to Fix It: Use a multi-step confirmation: first click reveals a warning, second click confirms. Consider requiring the user to type "DELETE" or their email. Offer a grace period for recovery.
For full implementation detail, examples, and testing notes, see references/pattern.md.
Pattern page: https://uxpatterns.dev/patterns/authentication/account-settings