shadcn.io is not affiliated with official shadcn/ui
Minimal Contact Form Block for Svelte
The calmest contact form, for a mail client: a centred heading and three fields on the page column with inline validation, a message counter and a one-line thank-you.
Installation
Overview
A minimal contact form for Svelte with Ark UI: no card, no frame, only the page's rails and top rule. A centred heading and one sentence sit over three fields (name, email and a message with a live counter out of 400) and a full-width Shine Button. Each field checks itself when you leave it, and corrects itself while you fix it; submitting checks the rest and moves focus to the first problem. A valid message turns into a single line of thanks in the same space, which takes focus, with a way to write another. It's built from Field, Input, Textarea, Guides, Shine Button and Button, with CSS transitions for the entrances. For apps, tools and sites that want a form and nothing else.
FAQ
When does a field show its problem?
Leaving a field that has something in it checks it, so a half-typed email is flagged as you tab away, not after you try to send. A field you haven't touched, or left empty, waits for the submit. While a message is showing, typing re-checks it: it changes to the next problem or goes away the moment the field is valid. Typing never raises a new message by itself.
How does the counter work?
The textarea has maxLength set to 400, so it stops there, and the counter under it shows what's typed. The counter is the field's description, so a screen reader hears "12 / 400 characters" when the field takes focus, not on every key. In the last 40 characters it turns to the full text colour and weight. Change LIMIT to move the cap and SHORTEST for the shortest message the check accepts.
Where does the form send its data?
Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the thanks. Replace that timer in submit with your own call (your inbox, a form endpoint or a help desk): details holds the name, email and message.
What does the thank-you say, and who hears it?
It names the visitor by first name and repeats the address the reply will go to, so a typo is easy to spot. It is a status region that takes focus when it appears, so a screen reader reads it at once. "Write another" brings back an empty form and puts focus on the heading.