Notification Preferences Settings Block for React

Edit the constants at the top. CHANNELS lists each channel with its label and where it reaches the person (an address or a phone number keeps its own order in any language, so it's marked ltr). ACTIVITIES lists each kind of notice with a one-line hint, the channels it can go to (offered) and the ones that can't be turned off (locked). PRESETS are named sets of cells, and SAVED is what the account has stored when the page opens: put the person's real settings there. Every count, the channel checkboxes and the preset's name are worked out from those, so nothing is typed twice.

Nothing leaves the page. The block keeps two copies of the settings, the saved one and the one being edited, and counts how many settings differ, so the status line can say "3 changes not saved yet." Save makes the edited copy the saved one and says it was saved in this demo; Discard puts the saved copy back. To make it real, send the edited copy (or only what changed) to your API in the save handler and update the saved copy from the response, showing the error in the same status line if it fails. Save and Discard are marked aria-disabled rather than disabled while nothing changed, so they keep their place and focus; pressing one then says there's nothing to do.

Each channel's checkbox looks at the cells of that channel you can switch: ticked when all are on, empty when none are, and mixed in between. Ticking it turns the channel on for every activity; ticking it again when it's all on turns it off. The security email is locked on: its switch is shown on and disabled with a lock beside it, the activity's hint says why, and no checkbox, preset or chip can turn it off. A channel an activity doesn't use (the digest by SMS) shows a dash, read out as "Not offered", and its phone chip is disabled.

It holds push and SMS between the two hours, wrapping past midnight, and the sentence under it says how long that is ("Push and SMS wait from 22:00 to 08:00, 10 hours a night"). Turned off, the hour menus stay in place but disabled, so nothing moves. If the start and the end are the same hour the sentence says so with an alert icon, and Save refuses with a reason and moves focus to the end time. Times are whole hours in the person's own time zone; store the zone with the settings.

Below the medium breakpoint the channel strip becomes two by two and the table becomes one card per activity, its name and hint over four toggle chips labelled Email, Push, In-app and SMS, solid when on. A chip's name for a screen reader includes the activity ("Email for Mentions"). The save bar sticks to the bottom of the screen while you scroll the panel, so Save is always in reach, and settles at the panel's foot when you get there; from the medium breakpoint it's simply the last band.

It's a native table with a caption, column headers for the channels and a row header for each activity, so a screen reader announces both as you move between cells, and every switch is also named for both ("Push for Status changes"). The channel checkboxes are named by the channel and described by their count and destination, and the status line is a polite live region that's present from the start. Every control that can change is reachable with Tab and works from the keyboard; the locked switch is skipped, and its row says why. On Base UI the mixed state is the checkbox's indeterminate prop.