Settings Page with Sections That Save Separately

ProNew

A long settings page with a section menu that tracks scrolling, shows how many errors each section has, and lets every section save on its own without touching the others. Use this when a page has several independent groups of settings.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

A settings page has groups (profile, security, notifications) that are saved independently and people jump between them.

Do not use it when: When the whole page is one transaction, use one form and one Save.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`initial`	`{ name, email, apiUrl, digest }`	Starting values.
`onSave`	`(sectionId, values) => Promise<void>`	Saves only that section's values.

Accessibility

The section menu is a navigation landmark with links and aria-current for the section in view; error counts are spoken ("Profile, 2 errors") and shown, and appear only after that section's Save was tried.
Each section is its own form with its own Save button named for the section; one section's problems never block another's.
Links scroll to the section and move focus to its heading; field errors are alerts linked to the field.

Testing

The pattern ships with a Testing Library test (section-save-settings-page.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

A settings page has groups (profile, security, notifications) that are saved independently and people jump between them.

Do not use it when: When the whole page is one transaction, use one form and one Save.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`initial`	`{ name, email, apiUrl, digest }`	Starting values.
`onSave`	`(sectionId, values) => Promise<void>`	Saves only that section's values.

Accessibility

The section menu is a navigation landmark with links and aria-current for the section in view; error counts are spoken ("Profile, 2 errors") and shown, and appear only after that section's Save was tried.
Each section is its own form with its own Save button named for the section; one section's problems never block another's.
Links scroll to the section and move focus to its heading; field errors are alerts linked to the field.

Testing

The pattern ships with a Testing Library test (section-save-settings-page.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.