Form Components Development Tutorials, Guides & Insights

<div class="container mx-auto p-8">
  <h1 class="text-2xl font-bold mb-8">Dynamic Form with Tailwind CSS and Alpine.js</h1>

  <form action="#" method="POST" class="space-y-6" x-data="dynamicForm()" @submit.prevent="submitForm()">
    <div>
      <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
      <input type="text" id="name" name="name" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm" required>
    </div>

    <div>
      <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
      <input type="email" id="email" name="email" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm" required>
    </div>

    <template x-for="(field, index) in fields"

 :key="index">
      <div class="flex items-center space-x-4">
        <div class="flex-grow">
          <label :for="'field-' + index" class="block text-sm font-medium text-gray-700">Field</label>
          <input :id="'field-' + index" type="text" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm" x-model="field.value" required>
        </div>
        <button type="button" class="bg-red-500 text-white p-2 rounded" @click="removeField(index)">Remove</button>
      </div>
    </template>

    <button type="button" class="bg-blue-500 text-white p-2 rounded" @click="addField()">Add New Field</button>

    <div>
      <button type="submit" class="bg-green-500 text-white p-2 rounded">Submit</button>
    </div>
  </form>
</div>

You can take this form to the next level by adding AJAX submission, integrating with a backend API, or using this as a basis for a larger dynamic form system (e.g., multi-step forms).