Block

Form Builder

Visual form builder with drag-and-drop field reordering, live preview, and code generation

Installation

npx shadcn add @mylo-ui/form-builder

Preview

Form Builder

5 fields

Preview

Full Name*

Email Address*

Phone Number

Preferred Contact

Newsletter

Subscribe to updates

Code

<!-- Form Component -->
<form className="space-y-4">
  <div className="space-y-2">
    <Label>Full Name *</Label>
    <Input type="text" placeholder="Enter your full name" />
  </div>
  <div className="space-y-2">
    <Label>Email Address *</Label>
    <Input type="email" placeholder="you@example.com" />
  </div>
  <div className="space-y-2">
    <Label>Phone Number</Label>
    <Input type="phone" placeholder="+1 (555) 000-0000" />
  </div>
  <div className="space-y-2">
    <Label>Preferred Contact</Label>
    <Select>
      <SelectTrigger>
        <SelectValue placeholder="Select..." />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="email">Email</SelectItem>
        <SelectItem value="phone">Phone</SelectItem>
        <SelectItem value="sms">SMS</SelectItem>
      </SelectContent>
    </Select>
  </div>
  <div className="flex items-center gap-2">
    <Checkbox id="5" />
    <Label htmlFor="5">Newsletter</Label>
  </div>
  <Button type="submit">Submit</Button>
</form>

Usage

import { FormBuilder } from "@/components/blocks/form-builder"

export default function Page() {
  return <FormBuilder />
}

Dependencies

lucide-react

@dnd-kit/core

@dnd-kit/sortable

@dnd-kit/utilities

shadcn/ui Components

card

button

input

label

badge

switch