shadcn.io is not affiliated with official shadcn/ui
Form Success State Block for Svelte
A create-an-event page where a valid press replaces the form with a result: a check, a list of what was made, next steps, a copyable link, an Open the event page button and Create another.
Installation
Overview
Turn a form into its own result with this form success state for Svelte with Ark UI. It is a whole screen with the page's side rails and one band across it, the form centred in the band: a product mark, "Create your event" and three fields (event name, date and venue). The fields are checked when the form is sent, each problem sits under its field and focus goes to the first. A valid press waits a moment and the form is replaced, in the same space, by its result: a check in a quiet tile, "Event created, in this demo", the Shine Button "Open the event page" and an outline "Create another", a list of the name, date and venue that were made, a made-up link with a Copy button and three next steps. Focus moves to the result's heading, and Create another brings back an empty form. The Shine Button is the only colored control. It is built from Input, Label, Copy Button, Shine Button and Guides. For any create flow that ends in something the visitor can open or share.
FAQ
How does the form turn into the result without the page jumping?
The form and the result are two panes in one grid cell. The inactive one is invisible, inert and faded out, but still takes its space, so the cell is as tall as the result and the page, which is centred, never moves. A pane turns visible at once so it can take focus, and fades out before it turns invisible.
Where does focus go?
After a good press focus moves to the result's heading, which is focusable but not in the tab order, and the page status says "Event created, in this demo". Create another returns focus to the event name field. With problems, focus goes to the first invalid field instead.
Where do the name, date and venue in the list come from?
From the same state the form wrote. The date is printed by a small helper from the ISO value with no clock and no locale, so the server and browser agree, and the link is a slug of the name on a .example host. Nothing is read back from a server.
How does the Copy button work?
It is the catalog Copy Button given the full address, which copies it to the clipboard and swaps its icon to a check for a few seconds, and the page status says "Event link copied." If the clipboard refuses, for example outside HTTPS, it announces that instead.
What stays local, and how do I connect it for real?
Create event waits 700 ms and creates nothing. To make it real, post the details from the submit handler and, when your API answers, set the result pane from its response: the real event name, date, venue and link. Show server errors in the same lines under the fields.