Form
Form components with validation
Preview
Props Editor
Source Code
defmodule FeenixUiWeb.Components.FormComponent do use Phoenix.Component def render(assigns) do assigns = assign_new(assigns, :fields, fn -> [] end) ~H""" <form class="space-y-4"> <%= for field <- @fields do %> <div> <label class="block text-sm font-medium text-gray-700 mb-1"> <%= field.label %> </label> <input type={field.type} name={field.name} class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500" placeholder={"Enter #{field.label}..."} /> </div> <% end %> <div class="flex space-x-3"> <button type="submit" class="px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500"> Submit </button> <button type="button" class="px-4 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500"> Cancel </button> </div> </form> """ end end