Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CRUD blocks

Pro

Form Builder CRUD Block for Svelte

A survey tool's field list where a field can only depend on an earlier one: reorder with the keyboard, set type and Required, add a Show if rule, and see a rule clear itself when its field moves above its source.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Build the fields of a survey and keep their rules honest with this form builder for Svelte with Ark UI. Six fields are rows with a name, a type and a rule in words, such as "Shows if Account type is Team"; each row opens in place with a Collapsible to its label Input, four type choices (Text, Choice, Yes or no, Date), the choices of a Choice field, a Required Switch and a pair of selects for Show if. The first select lists only earlier fields that have answers, and moving a field above the one it depends on clears its rule and says so: "Company no longer depends on Account type." Earlier and Later buttons move a field from the keyboard, and the type buttons under the list add one. The foot counts "6 fields, 3 required, 1 conditional". Every change leaves a line with Undo. For surveys, sign-up forms and any list of questions with branching.

FAQ

How do I define my own fields?

Edit START. A field has an id, a label, a kind (text, choice, yesno or date), a comma separated options string for Choice, required, and ifField and ifAnswer for its rule. Only Choice and Yes or no fields have answers a rule can test.

Why can a field only depend on an earlier one?

A person answers top to bottom, so a rule that looks ahead could never be decided. settleOf runs after every change and clears any rule whose source is gone, is later in the list, or whose answer no longer exists, with a sentence for each.

How do I move a field without dragging?

Every row has Earlier and Later buttons, so the order is changed from the keyboard. Focus stays on the button after the move so you can press it again, and at either end the button is aria-disabled and says so in the foot.

Where does the count in the foot come from?

summaryOf counts the list on every render: the fields, those with required and those with an ifField. Nothing is stored twice, so it can't drift from the rows.

What stays local, and how do I save the form?

The fields live in state in this tab and a reload brings the first six back. In your app send the list from apply, the one place every change goes through, and store the order as an array so a rule's earlier-than check stays a simple index comparison.

How does it look on a phone?

Rows stay one column and an open editor stacks its fields, with the two selects one above the other. The list sits in a frame of fixed height with its own scroll, so adding or opening a field doesn't move the foot.

All 100 crud blocks