shadcn.io is not affiliated with official shadcn/ui
Channel Notification Preferences Toggle Form Block for Vue
Notification preferences in two sections, Email and Push, with four event switches each, a count of what is on, a button that copies one section across to the other with Undo, and Billing email locked on for receipts.
Installation
Overview
Set the same preferences twice in one move with this notification preferences form for Vue with Ark UI. A compact header sits over a hairline frame with a plus mark on each corner. Two sections, Email and Push, sit side by side from the large breakpoint on one hairline and stack on a phone. Each is a field set with four events (Comments, Mentions, Product updates and Billing), each a Switch named for its event and channel, and a legend that counts what is on ("3 of 4 on"). A ghost Button, "Copy these to Push" in one and "Copy these to Email" in the other, copies one section's states across; "Copied. Undo" then appears in the section that changed and puts it back. Billing email is required for receipts, so its switch is locked on and a copy never turns it off. It is a list of events per channel, not a grid of events by channels. The foot counts the unsaved changes in its button ("Save 2 changes") beside an outline Button to discard them. It's built from Switch, Field, Button, Shine Button and Guides, with a CSS entrance only. For team chat, project and community apps whose people want email and push to differ.
FAQ
How do I change the events and channels?
Edit EVENTS (an id, a name and a hint) and CHANNELS; START holds which events are on per channel. The "of 4" counts and the number of changes are derived, so only the "of 4" text is worth updating if you add events. LOCKED names the one event and channel that cannot be turned off.
What does copying across do, and how does Undo work?
It replaces the other section's list with this one's, keeping the locked event on, and remembers what the other section had. "Undo" puts that list back. Any later switch change or Save clears the undo, because the remembered list would no longer be what the visitor expects.
Why is Billing email locked?
Receipts and failed-payment notices are required, so the switch is on and disabled and its hint says "Required for receipts." In your app, a locked row is a decision for your terms, not the interface: keep the lock in the data (LOCKED) and enforce the rule on the server too.
How does it look on a phone?
The sections stack, Email then Push, each with its copy row and its four events. The copy row keeps a reserved space for "Copied. Undo", so the list below never moves. The foot is pinned to the bottom of the screen.