shadcn.io is not affiliated with official shadcn/ui
Newsletter FAQ Block for Svelte
A subscribe form in a side header, for a weekly newsletter of product notes: a labelled email field, the Shine Button and a confirmation beside six questions about the newsletter.
Installation
Overview
A newsletter FAQ for Svelte with Ark UI. The start column holds the title, one sentence and the subscribe form: a labelled email field, the Shine Button and a line under the button. A wrong address shows a message under the field and keeps focus there; a good one shows a confirmation in the form's own space, so the header never changes height. The end column, behind a split divider, holds six questions about the newsletter itself, cadence, contents, leaving, back issues, privacy and what to do if nothing arrives, in hairline rows with an arrow that turns over while a row is open. It's built from Accordion, Field, Input, Guides, Shine Button and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For newsletter and changelog pages where a visitor wants to know what they're signing up for.
FAQ
Does the form subscribe anyone?
No: nothing leaves the page. subscribe checks the address, shows the button's loading state for a short simulated wait (LATENCY) and then the confirmation. Replace the body of the timeout with a call to your mailing list, and show the confirmation when it answers. The confirmation says to open the message you sent and confirm, so it fits a double opt-in list.
How is the address checked?
problemWith checks that it isn't empty and looks like an address (something, an at sign, a domain with a dot). The message goes under the field, the field is marked invalid and keeps focus, and typing clears it. The field is read-only, not disabled, while the request runs, so it keeps focus. It isn't checked on each key.
What does a screen reader announce?
The field has a visible label, and the error is tied to it. A polite status line says "Subscribing…" while the request runs, then focus moves to the confirmation, which is read out. "Use a different address" empties the field and puts focus back in it.
Are the closed answers in the page's markup?
Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens.
How do the questions work with a keyboard?
Each question is a button inside its own h3. Tab moves through the form first, then the questions; Enter or Space opens and closes one, and the button says whether it's expanded.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.