Form

Form components with validation

Preview

Props Editor

✅ JSON is valid - Click "Preview Update" to see changes

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