Input

Text input fields with various types

Preview

Props Editor

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

Source Code

defmodule FeenixUiWeb.Components.InputComponent do
  use Phoenix.Component

  def render(assigns) do
    assigns = assign_new(assigns, :type, fn -> "text" end)
    assigns = assign_new(assigns, :placeholder, fn -> "Enter text..." end)
    assigns = assign_new(assigns, :value, fn -> "" end)
    assigns = assign_new(assigns, :label, fn -> "Input Label" end)

    ~H"""
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">
        <%= @label %>
      </label>
      <input
        type={@type}
        value={@value}
        placeholder={@placeholder}
        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"
      />
    </div>
    """
  end
end