Playground
For testing Superforms, bug reporting, support questions, or as a start for your project, click on your chosen library to open a SvelteKit project with a basic form in SvelteLab:
Examples
![Example](/examples/components.png)
How to use and reuse forms and input fields in components.
![Example](/examples/radio-check.png)
Group inputs, with radio buttons and checkboxes.
![Example](/examples/multi-select.png)
Group inputs, with a dropdown menu and a multiple select menu.
![Example](/examples/dropdown-check.png)
Group inputs, with a dropdown menu and checkboxes.
![Example](/examples/file-uploads.png)
Single and multiple file upload with client-side validation.
![Example](/examples/date-array.png)
Array of components with a proxy for date input.
![Example](/examples/list-actions.png)
How to use Superforms with actions on a list of data.
![Example](/examples/spa.png)
Single-page application form, no +page.server.ts, calling an external API instead.
![Example](/examples/multi-step-client.png)
Multi-step form on the client, JS required but nice UX.
![Example](/examples/multi-step-server.png)
Multi-step form on the server, no JS required but reloads on every step.
![Example](/examples/multi-step-skeleton.png)
Multi-step form with the Skeleton UI framework.
![Example](/examples/url.png)
Parsing the URL parameters and filtering a list of items.
![Example](/examples/username-available.png)
How to make a debounced "username available" check.
![Example](/examples/crud.png)
A fully functional CRUD backend in 150 lines of code.
Send a message on Discord if you have an idea of something else that should be included!