shadcn.io is not affiliated with official shadcn/ui
Newsletter Opt-In Onboarding Block for React Aria
Four email lists as ruled rows with checkboxes and a select-all, a switch that combines them into one weekly digest, and a figure worked out from how often each list sends.
Installation
Overview
Show people what they are signing up for with this newsletter step for React with React Aria. It is the email panel of Morrowvale, a news-and-community site: a header, then a framed panel with an All lists checkbox that is mixed while only some lists are on, four ruled rows (The Weekly Brief, Community highlights, Product notes, Events and meetups) each with a Checkbox, a line on what it sends and how often, and a Switch that combines whatever is on into one weekly digest. Under them a figure is worked out from how often each list sends, “About 8 emails a month”, or “About 4” with the digest, which sends at most one a week. Save choices is the one Shine Button; nothing is stored or sent.
FAQ
How is the monthly figure worked out?
Each list has a typed perMonth number (4, 2, 1 and 0.5). The figure adds the lists that are on and rounds the sum, “Fewer than 1 email a month” when it is below one, and “No emails” when none are on. With the digest on it is capped at four, because the digest goes out once a week. Change the numbers in LISTS to match how your lists really send.
What does the digest switch change?
It does not change which lists are on. It changes how they arrive: the rows that are on say “In the digest” instead of their own day, the figure drops to at most four, and the line under it says one email each Monday at most. Turn it off and every list goes back to its own schedule.
How does the All lists box behave?
It is ticked when all four are on, mixed when some are and empty when none are. Pressing it while it is ticked or mixed turns everything off; pressing it when empty turns everything on. The count beside it (“2 of 4 on”) is always in text, so the mixed state is never the only signal.
What stays local in the demo, and how do I wire it?
The choices are held in the page and Save choices only says it saved in this demo; no address is collected and no email is sent. In your app write the picked list ids and the digest flag to the member's profile where submit says so, and let the unsubscribe link in each email change the same record.