Add a switch to your Liveview Core Components

Add this input function to your core_components.ex that phx.new generated and now you got switches!

Note: Make sure to put this function under the other defined input function so that it shares the same attr

Input Function component

def input(%{type: "switch"} = assigns) do
    assigns =
      assign_new(assigns, :checked, fn ->
        Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value])
      end)

    ~H"""
    <div class="w-20 h-10">
      <label class="cursor-pointer relative flex justify-between items-center group text-xl">
        <input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} />

        <input
          type="checkbox"
          id={@id}
          name={@name}
          value="true"
          checked={@checked}
          class="hidden absolute left-1/2 -translate-x-1/2 w-full h-full peer appearance-none rounded-md"
          {@rest}
        />
        <span class="w-[3.2rem] h-7 flex items-center flex-shrink-0 p-1 rounded-full duration-300 ease-in-out after:bg-zinc-300 dark:after:bg-zinc-700 peer-checked:after:bg-brand after:w-5 after:h-5 after:bg-zinc-800 after:rounded-full after:duration-300 peer-checked:after:translate-x-5 group-hover:after:translate-x-0.5 bg-zinc-100 dark:bg-zinc-900 border border-0.5 focus:ring-0 border-zinc-300 dark:border-zinc-700 peer-checked:border-brand">
        </span>
        <span class="ml-2 block text-sm font-semibold leading-6 text-zinc-800 dark:text-zinc-200">
          <%= @label %>
        </span>
      </label>
      <.error :for={msg <- @errors}><%= msg %></.error>
    </div>
    """
  end

How to use:

<.input field={@form[:draft]} type="switch" label="Draft" />