shadcn.io is not affiliated with official shadcn/ui
Subscribe or Write Contact Block for React Aria
A card in card with a switch between two real forms, subscribe (an email and how often) and write to us (name, email and message), that never changes size and confirms in place.
Installation
Overview
A contact section for React with React Aria that holds two ways in behind one door. A centred header sits over a card in card: a tinted shell with + marks on its corners and a raised panel. A Segment Group at the top of the panel switches between Subscribe (an email and how often, in a Select) and Write to us (name, email and a message). Both forms are real and stay in the same grid cell, so the card never changes size; the one not showing is inert and invisible, and the email you typed follows you across. Each form checks itself on submit, shows each problem under its field, marks the control invalid and moves focus to the first one; a valid send turns the whole panel into a confirmation that says what was done. It's built from Segment Group, Select, Field, Input, Textarea, Frame, Guides, Shine Button and Button, with CSS transitions for the entrances and your theme's tokens for every colour. For newsletters, blogs and shops that want a sign-up and a "contact us" in one place.
FAQ
Where do the forms send their data?
Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. In submit, mode says which form was sent: send details.email and details.frequency to your mailing list for Subscribe, or details to your inbox for Write to us. The confirmation doesn't claim a confirmation email was sent.
Why doesn't the card change height when I switch?
The two forms sit in one grid cell, so the cell is as tall as the taller one (Write to us) and the other fades out inside it. The form that isn't showing is inert and invisible, so keyboard users and screen readers never reach it. Subscribe fills the extra room with what each issue holds.
How is the frequency select labelled?
The label above it names the select's button for screen readers.
The label takes an id and the Select takes aria-labelledby; the trigger takes the id.
How does each form check what's typed?
Both forms have noValidate, so the browser's bubbles stay away. On submit, problems checks the form that shows: an email with an @ and a domain for Subscribe; a name, an email and a message for Write to us. Typing in a field clears its message, and switching forms clears all of them.
What does the confirmation say, and who hears it?
For Subscribe it names the email and how often the issue goes out; for Write to us it thanks the visitor by first name and repeats the email. It's a status region that takes focus when it appears, so a screen reader reads it at once, and its button ("Use another email" or "Write another message") brings the forms back and focuses the first field.