Settings that save themselves

The problem

Settings pages mix two models. Some switches save straight away, some fields wait for a Save button at the bottom of the page, and nothing tells people which is which. They change a setting, leave, and lose it, or press Save on a page that already saved.

When to use it

Anatomy

1. SectionsVerticalTab or Tab per area: Profile, Notifications, Security.
2. Instant settingsSwitchField, SegmentedControl. Each change saves on its own and shows a short Toast.
3. Saved groupsRelated text fields in a form with its own Save button, right below the group.
4. FailureIf an instant save fails, put the switch back and show an error Toast with a retry.

How to build it

1. Sort each setting into instant (on/off, a choice) or saved (text fields, related values).
2. Use SwitchField for instant settings and save each change straight away.
3. Confirm each instant save with a polite Toast: “Leave emails turned off”.
4. Group saved fields into a form with its own Save button directly below it, not at the bottom of the page.
5. Never mix both models in one section. A section is either instant or has a Save button.
6. If people leave a saved group with unsaved changes, ask before throwing them away.

import { SwitchField, useToast } from "@nexera-ui/react";

export function LeaveEmails({ initial }: { initial: boolean }) {
  const toasts = useToast();
  const [on, setOn] = useState(initial);
  return (
    <SwitchField
      label="Email me about leave requests"
      description="When someone on your team applies or cancels"
      isSelected={on}
      onChange={async (next) => {
        setOn(next);
        try {
          await saveSetting("leaveEmails", next);
          toasts.add({ title: next ? "Leave emails turned on" : "Leave emails turned off" });
        } catch {
          setOn(!next);
          toasts.add({ title: "Couldn't save. Try again.", tone: "danger" });
        }
      }}
    />
  );
}

Accessibility

• A switch announces its new state when it changes; the toast confirms that it was saved.
• Each saved group is a form with its own heading, so its Save button is clearly its own.
• Don't disable Save until something changes; explain instead, or people can't find out why.

Do and don't

Components and blocks

• SwitchFieldA setting row with a label, optional helper text and a switch at the end, applied immediately.
• TabOne tab of a horizontal `TabList`.
• InputSingle-line text field: label, a field box with optional leading and trailing icons, helper text and an inline error.
• ButtonTriggers an action such as Save, Submit, Approve or Delete.
• ToastGives the components below it a toast queue through `useToast()` and renders its `ToastRegion`.

Blocks that use this pattern

• Settings layoutApp shells and navigation
• Notification preferencesSettings and preferences
• Maintenance and offlineStates and system messages
• Top bar with tabsApp shells and navigation
• Notification centreMessaging and collaboration
• Approvals inboxWork and projects
• Sign inSign in and account
• Create accountSign in and account