shadcn.io is not affiliated with official shadcn/ui
Digest Chooser Newsletter Footer Block for React Aria
A newsletter footer for a developer digest: two link groups on one half of a split, and on the other a real sign-up that lets the visitor tick the digests they want, checks the address and confirms in place.
Installation
Overview
A newsletter footer for React with React Aria, split behind a hairline that runs from the page's top rule to the end of the page. The start half holds the brand, one sentence and two link groups in the nav labelled Footer. The end half is a working sign-up: a heading, three digests to tick as hairline rows (a weekly digest, release notes and security advisories, each with one line saying what it is), an email field and the Shine Button. Submitting it checks that at least one digest is ticked and that the address looks like an address, shows each problem under its control and moves focus to the first one, then turns into "Check your inbox to confirm" in the same space. A legal band runs under both halves. It's built from Field, Input, Checkbox, Guides, Shine Button and Button, with your theme's tokens for every colour.
FAQ
Where does the sign-up go?
Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with a call to your mailing-list provider: email holds the address and picked the ids of the digests that were ticked. Show the confirmation when the request succeeds and an error line in the form when it doesn't.
How does the form check what is entered?
The form has noValidate, so the browser's own bubbles stay away and the block shows its own messages. On submit, problems checks that at least one digest is ticked and that the email has an @ and a domain. Each problem appears under its control with an icon, the email field gets aria-invalid and an aria-describedby pointing to the message, and focus moves to the first problem: the first tick box, or the email field. Typing or ticking clears the message.
How do I change the digests?
Edit DIGESTS at the top of the file: each has an id, a title and one line of detail. The first tick box is on by default (useState(["weekly"])); change that array to start with none, or all of them. The confirmation lists the titles of whatever was ticked, in the list's order.
How are the tick boxes named for screen readers?
Each row is one label, so clicking the title or the line under it toggles the box. The box takes its name from the title and its description from the line under it, and the rows sit in a fieldset with a screen-reader-only legend, so they are read as a group.
The box is a label with a hidden native input inside it; focus lands on that input when the choice is missing.
What does the confirmation say, and who hears it?
It repeats the address and the digests, so the visitor can spot a typo, and it says what happens next: confirm the link. It's a status region that takes focus when it appears, so a screen reader reads it at once, and "Use another address" brings back a fresh form with focus on its heading.
How does it fit on a phone?
Below lg the halves stack with a rule between them: the brand and the two link groups, then the sign-up, then the legal band. The submit button goes full width. Nothing scrolls sideways at 320 pixels, and the footer is a static layout with no entrance animation, so reduced motion changes nothing except the confirmation's fade.