shadcn.io is not affiliated with official shadcn/ui
Form Builder Block for Solid
A form builder in a fixed-height window: add text, email, select, textarea and checkbox fields, reorder and remove them, edit each one's label, placeholder, required switch and options, try the form as built, and copy its schema.
Installation
Overview
Let people design the form before they use it with this form builder for Solid with Ark UI. A window framed by a hairline with a plus mark on each corner has a top bar with the form's name, a Copy schema Copy Button and the Shine Button that saves the form, the only colored control. A Segment Group switches the view between Fields and Form (and Settings on a phone). The palette adds a Text, Email, Select, Textarea or Checkbox field; the canvas lists the fields, each with Move up, Move down and Remove buttons, and selects one; the inspector edits the selected field's label, placeholder, a required Switch and, for a select, its options one per line. The Form view renders the form exactly as built with real Inputs, a Native Select, a Textarea and a Checkbox, and Send message checks the required fields and the email format. Removing every field shows an Empty state, and the window never changes height. A status line at its foot says what changed. It's built from Segment Group, Switch, Input, Native Select, Textarea, Checkbox, Empty, Copy Button, Button, Shine Button and Guides, with a CSS entrance only. For form and survey makers, admin tools and any app that lets people define fields.
FAQ
How do I start from my own fields or add another kind?
START is the form when the page opens: each field has an id, a kind (text, email, select, textarea or checkbox), a label, a placeholder, a required flag and options as text with one option per line. KINDS is the palette; a new kind needs an entry there, a branch in PreviewField and, if it has its own settings, a control in Inspector. New ids come from a counter in state, never from the clock.
What does Copy schema copy?
A typed JSON of the form as built: its title and, for each field, its id, type, label, placeholder, required and, for a select, its options. It is written from the same state as the canvas, so what you copy is what you see; the Form view reads that state too. If the browser refuses the clipboard (a page not served over HTTPS), the button shows a cross and says so. Save form keeps the same text in the tab and stops the "Unsaved changes" mark; nothing is sent.
How does the Form view check the form?
Send message checks each field as built: a required field must not be empty, a required checkbox must be ticked and an email field must look like an address. Every field has a reserved line for its message, so nothing moves, and the status line names how many fields to fix while focus goes to the first one. After that each field re-checks as you type. A valid form says "The form is valid. Nothing was sent."
How does it work with a keyboard and a screen reader?
The palette buttons are named "Add Text field" and so on; each field in the list is a button that says its label, its kind and whether it's required, and the selected one is marked as current. Move up and Move down are named for the field and stay in place with aria-disabled at the ends; focus stays on the button you pressed, or goes to the neighbour after a Remove. The three scroll regions can be reached with Tab. One polite status line reports each change.
How does it look on a phone?
Below the large breakpoint the window shows one pane at a time, chosen by the segment group: Fields (the palette above the list), Form (the preview) or Settings (the inspector). The window keeps its height, with only the pane scrolling. From the large breakpoint the palette, the canvas or preview and the inspector sit side by side and Settings drops out of the switch.
What stays local, and how do I connect it for real?
Everything: the fields, the saved copy, the values typed into the preview and the status line live in the block's state, and nothing is sent or stored. To make it real, save the schema from the Save form handler (it is the same JSON Copy schema produces), load it back into START and render real submissions from the saved schema with the same PreviewField.