form-builder

    Svelte Form Builder include various Input fields validated using ZOD + Superforms

    Language: svelte

    Author: Sammy Jennings (@sammydev)

    9 stars · 366 views

    Files

    • button-group-text.svelte (svelte)
    • button-group-separator.svelte (svelte)
    • index.ts (ts)
    • dropdown-menu-shortcut.svelte (svelte)
    • dropdown-menu-radio-group.svelte (svelte)
    • dropdown-menu.svelte (svelte)
    • input-otp-group.svelte (svelte)
    • command-shortcut.svelte (svelte)
    • command-item.svelte (svelte)
    • sidebar-content.svelte (svelte)
    • sidebar-footer.svelte (svelte)
    • constants.ts (ts)
    • calendar-prev-button.svelte (svelte)
    • avatar-image.svelte (svelte)
    • avatar-fallback.svelte (svelte)
    • index.ts (ts)
    • sonner (txt)
    • sonner.svelte (svelte)
    • index.ts (ts)
    • slider (txt)
    • breadcrumb-ellipsis.svelte (svelte)
    • breadcrumb-item.svelte (svelte)
    • breadcrumb-link.svelte (svelte)
    • index.ts (ts)
    • breadcrumb.svelte (svelte)
    • breadcrumb-separator.svelte (svelte)
    • hover-card (txt)
    • types.ts (ts)
    • sheet.svelte (svelte)
    • index.ts (ts)
    • tooltip (txt)
    • svelte.config.js (js)
    • jsrepo-build-config.json (json)
    • .vscode (vscode)
    • settings.json (json)
    • static (txt)
    • tooltip-trigger.svelte (svelte)
    • code.svg (image)
    • favicon.png (image)
    • README.md (md)
    • tsconfig.json (json)
    • DEVELOPMENT_PLAN.md (md)
    • jsrepo-manifest.json (json)
    • components.json (json)
    • LICENSE (txt)
    • scroll-area-scrollbar.svelte (svelte)
    • package.json (json)
    • .github (github)
    • ISSUE_TEMPLATE (txt)
    • feature_request.md (md)
    • FUNDING.yml (yml)
    • Form_Templates.md (md)
    • vite.config.ts (ts)
    • features.md (md)
    • pnpm-lock.yaml (yaml)
    • src (txt)
    • app.d.ts (ts)
    • lib (txt)
    • landing (txt)
    • comps (txt)
    • solution (txt)
    • SubSoln2.svelte (svelte)
    • SubSoln1.svelte (svelte)
    • Solution.svelte (svelte)
    • SubSoln4.svelte (svelte)
    • SubSoln3.svelte (svelte)
    • Hero.svelte (svelte)
    • Faq.svelte (svelte)
    • Features.svelte (svelte)
    • index.ts (ts)
    • button-group (txt)
    • Section.svelte (svelte)
    • HowItWorks.svelte (svelte)
    • Footer.svelte (svelte)
    • images (txt)
    • oc-thinking.svg (image)
    • img5.png (image)
    • final_code.png (image)
    • img1.png (image)
    • img4.png (image)
    • img2.png (image)
    • choose_components.png (image)
    • img3.png (image)
    • edit.svelte (svelte)
    • sheet-title.svelte (svelte)
    • code.svelte (svelte)
    • schema.svelte (svelte)
    • edit_field.png (image)
    • form-generator (txt)
    • comps (txt)
    • EditSelectedInputs.svelte (svelte)
    • form-gen.svelte.ts (ts)
    • hooks (txt)
    • is-mobile.svelte.ts (ts)
    • use-clipboard.svelte.ts (ts)
    • label.svelte (svelte)
    • index.ts (ts)
    • analytics.ts (ts)
    • pm-command.svelte.ts (ts)
    • data (txt)
    • utils.ts (ts)
    • index.ts (ts)
    • components (txt)
    • docs (txt)
    • comps (txt)
    • Sidebar.svelte (svelte)
    • CodeBlock.svelte (svelte)
    • popover (txt)
    • DocNavigation.svelte (svelte)
    • nav-projects.svelte (svelte)
    • nav-user.svelte (svelte)
    • nav-main.svelte (svelte)
    • ui (txt)
    • scroll-area (txt)
    • scroll-area.svelte (svelte)
    • button-group.svelte (svelte)
    • index.ts (ts)
    • textarea (txt)
    • textarea.svelte (svelte)
    • index.ts (ts)
    • accordion (txt)
    • accordion-content.svelte (svelte)
    • accordion-item.svelte (svelte)
    • accordion-trigger.svelte (svelte)
    • index.ts (ts)
    • select (txt)
    • popover-content.svelte (svelte)
    • select-content.svelte (svelte)
    • select-group-heading.svelte (svelte)
    • select-scroll-down-button.svelte (svelte)
    • select-scroll-up-button.svelte (svelte)
    • select-trigger.svelte (svelte)
    • select-item.svelte (svelte)
    • select-separator.svelte (svelte)
    • index.ts (ts)
    • label (txt)
    • tooltip-content.svelte (svelte)
    • card (txt)
    • card-title.svelte (svelte)
    • card-content.svelte (svelte)
    • card-description.svelte (svelte)
    • card.svelte (svelte)
    • card-footer.svelte (svelte)
    • card-header.svelte (svelte)
    • index.ts (ts)
    • dropdown-menu (txt)
    • dropdown-menu-trigger.svelte (svelte)
    • dropdown-menu-group.svelte (svelte)
    • dropdown-menu-separator.svelte (svelte)
    • dropdown-menu-radio-item.svelte (svelte)
    • dropdown-menu-sub-content.svelte (svelte)
    • dropdown-menu-group-heading.svelte (svelte)
    • dropdown-menu-label.svelte (svelte)
    • dropdown-menu-sub.svelte (svelte)
    • dropdown-menu-content.svelte (svelte)
    • dropdown-menu-item.svelte (svelte)
    • dropdown-menu-checkbox-group.svelte (svelte)
    • index.ts (ts)
    • dropdown-menu-sub-trigger.svelte (svelte)
    • dropdown-menu-checkbox-item.svelte (svelte)
    • dropdown-menu-portal.svelte (svelte)
    • separator (txt)
    • separator.svelte (svelte)
    • index.ts (ts)
    • file-drop-zone (txt)
    • FileDropZone.svelte (svelte)
    • index.ts (ts)
    • input-otp (txt)
    • input-otp-slot.svelte (svelte)
    • input-otp.svelte (svelte)
    • index.ts (ts)
    • input-otp-separator.svelte (svelte)
    • command (txt)
    • command-empty.svelte (svelte)
    • command-list.svelte (svelte)
    • command-dialog.svelte (svelte)
    • command-separator.svelte (svelte)
    • command-group.svelte (svelte)
    • command-link-item.svelte (svelte)
    • index.ts (ts)
    • command-input.svelte (svelte)
    • command.svelte (svelte)
    • sidebar (txt)
    • sidebar-group-label.svelte (svelte)
    • sidebar-menu-action.svelte (svelte)
    • context.svelte.ts (ts)
    • sheet-trigger.svelte (svelte)
    • sidebar-menu-sub-button.svelte (svelte)
    • sidebar-menu-sub-item.svelte (svelte)
    • sidebar-separator.svelte (svelte)
    • sidebar-rail.svelte (svelte)
    • sidebar-header.svelte (svelte)
    • sidebar-menu-item.svelte (svelte)
    • sidebar-group-content.svelte (svelte)
    • checkbox.svelte (svelte)
    • sidebar.svelte (svelte)
    • sidebar-menu-badge.svelte (svelte)
    • sidebar-trigger.svelte (svelte)
    • sidebar-group.svelte (svelte)
    • sidebar-menu.svelte (svelte)
    • sidebar-menu-skeleton.svelte (svelte)
    • index.ts (ts)
    • sheet (txt)
    • sheet-header.svelte (svelte)
    • sheet-description.svelte (svelte)
    • sidebar-menu-button.svelte (svelte)
    • sidebar-group-action.svelte (svelte)
    • sidebar-input.svelte (svelte)
    • sidebar-provider.svelte (svelte)
    • sidebar-inset.svelte (svelte)
    • index.ts (ts)
    • sidebar-menu-sub.svelte (svelte)
    • checkbox (txt)
    • sheet-content.svelte (svelte)
    • sheet-overlay.svelte (svelte)
    • sheet-close.svelte (svelte)
    • sheet-portal.svelte (svelte)
    • index.ts (ts)
    • sheet-footer.svelte (svelte)
    • calendar (txt)
    • calendar-grid-row.svelte (svelte)
    • calendar-grid-head.svelte (svelte)
    • calendar-grid-body.svelte (svelte)
    • calendar-grid.svelte (svelte)
    • calendar-head-cell.svelte (svelte)
    • calendar-heading.svelte (svelte)
    • calendar.svelte (svelte)
    • calendar-months.svelte (svelte)
    • calendar-cell.svelte (svelte)
    • calendar-header.svelte (svelte)
    • calendar-day.svelte (svelte)
    • index.ts (ts)
    • calendar-next-button.svelte (svelte)
    • avatar (txt)
    • avatar.svelte (svelte)
    • slider.svelte (svelte)
    • index.ts (ts)
    • radio-group (txt)
    • radio-group.svelte (svelte)
    • radio-group-item.svelte (svelte)
    • index.ts (ts)
    • tags-input (txt)
    • types.ts (ts)
    • tags-input.svelte (svelte)
    • tags-input-tag.svelte (svelte)
    • index.ts (ts)
    • breadcrumb (txt)
    • breadcrumb-list.svelte (svelte)
    • breadcrumb-page.svelte (svelte)
    • hover-card-content.svelte (svelte)
    • hover-card-trigger.svelte (svelte)
    • hover-card-portal.svelte (svelte)
    • index.ts (ts)
    • hover-card.svelte (svelte)
    • switch (txt)
    • switch.svelte (svelte)
    • index.ts (ts)
    • collapsible (txt)
    • collapsible-content.svelte (svelte)
    • collapsible.svelte (svelte)
    • collapsible-trigger.svelte (svelte)
    • index.ts (ts)
    • tabs (txt)
    • tabs-list.svelte (svelte)
    • dialog-title.svelte (svelte)
    • tabs-trigger.svelte (svelte)
    • tabs-content.svelte (svelte)
    • tabs.svelte (svelte)
    • index.ts (ts)
    • button (txt)
    • button.svelte (svelte)
    • index.ts (ts)
    • skeleton (txt)
    • skeleton.svelte (svelte)
    • index.ts (ts)
    • field (txt)
    • field-content.svelte (svelte)
    • field.svelte (svelte)
    • field-legend.svelte (svelte)
    • field-label.svelte (svelte)
    • field-error.svelte (svelte)
    • field-title.svelte (svelte)
    • field-description.svelte (svelte)
    • field-group.svelte (svelte)
    • field-separator.svelte (svelte)
    • field-set.svelte (svelte)
    • index.ts (ts)
    • copy-button (txt)
    • alert-dialog.svelte (svelte)
    • copy-button.svelte (svelte)
    • index.ts (ts)
    • dialog (txt)
    • dialog-overlay.svelte (svelte)
    • dialog.svelte (svelte)
    • dialog-content.svelte (svelte)
    • dialog-trigger.svelte (svelte)
    • dialog-close.svelte (svelte)
    • dialog-footer.svelte (svelte)
    • dialog-header.svelte (svelte)
    • dialog-description.svelte (svelte)
    • SavedFormItem.svelte (svelte)
    • index.ts (ts)
    • dialog-portal.svelte (svelte)
    • input (txt)
    • input.svelte (svelte)
    • index.ts (ts)
    • resizable (txt)
    • resizable-pane-group.svelte (svelte)
    • index.ts (ts)
    • resizable-handle.svelte (svelte)
    • utils.ts (ts)
    • input-group (txt)
    • country-selector.svelte (svelte)
    • layout (txt)
    • input-group-addon.svelte (svelte)
    • input-group.svelte (svelte)
    • input-group-textarea.svelte (svelte)
    • input-group-input.svelte (svelte)
    • input-group-button.svelte (svelte)
    • index.ts (ts)
    • input-group-text.svelte (svelte)
    • phone-input (txt)
    • EditorPanel.svelte (svelte)
    • phone-input.svelte (svelte)
    • index.ts (ts)
    • flag.svelte (svelte)
    • kbd (txt)
    • kbd.svelte (svelte)
    • kbd-group.svelte (svelte)
    • index.ts (ts)
    • pm-command (txt)
    • pm-command.svelte (svelte)
    • index.ts (ts)
    • badge (txt)
    • alert-dialog-portal.svelte (svelte)
    • badge.svelte (svelte)
    • index.ts (ts)
    • alert-dialog (txt)
    • alert-dialog-content.svelte (svelte)
    • alert-dialog-description.svelte (svelte)
    • alert-dialog-footer.svelte (svelte)
    • alert-dialog-overlay.svelte (svelte)
    • alert-dialog-cancel.svelte (svelte)
    • alert-dialog-action.svelte (svelte)
    • alert-dialog-header.svelte (svelte)
    • alert-dialog-trigger.svelte (svelte)
    • index.ts (ts)
    • alert-dialog-title.svelte (svelte)
    • magicui (txt)
    • SafariMock (txt)
    • SafariMock.svelte (svelte)
    • AnimatedShinyText (txt)
    • AnimatedShinyText.svelte (svelte)
    • index.ts (ts)
    • Ripple (txt)
    • RippleEffect.svelte (svelte)
    • GridPattern (txt)
    • GridPattern.svelte (svelte)
    • NumberTicker (txt)
    • NumberTicker.svelte (svelte)
    • FlickeringGrid (txt)
    • FlickeringGrid.svelte (svelte)
    • Features (txt)
    • Features.svelte (svelte)
    • v2 (txt)
    • state (txt)
    • form-v2.svelte.ts (ts)
    • global-state.svelte.ts (ts)
    • docs (txt)
    • Subheading.svelte (svelte)
    • Heading.svelte (svelte)
    • utils (txt)
    • code-generator.ts (ts)
    • analytics-v2.ts (ts)
    • templates.ts (ts)
    • ui (txt)
    • CodeBlock.svelte (svelte)
    • FieldsPanel.svelte (svelte)
    • MainLayout.svelte (svelte)
    • PreviewPanel.svelte (svelte)
    • Header.svelte (svelte)
    • TemplatesPanel.svelte (svelte)
    • modal (txt)
    • CodeModal.svelte (svelte)
    • SaveFormModal.svelte (svelte)
    • ImportFormModal.svelte (svelte)
    • index.ts (ts)
    • app-sidebar.svelte (svelte)
    • web (txt)
    • layouts (txt)
    • Navbar.svelte (svelte)
    • playground (txt)
    • ZodSchemaCode.svelte (svelte)
    • zoom-code (txt)
    • ZoomCode.svelte (svelte)
    • PreviewComponents.svelte (svelte)
    • InputsDragCode.svelte (svelte)
    • PreviewAndCode.svelte (svelte)
    • code (txt)
    • CopyCode.svelte (svelte)
    • ATTRIBUTION.md (markdown)

    Loading code snippet…