switch

lib/doggo.ex

@@ -929,7 +929,8 @@ defmodule Doggo do
   attr :type, :string,
     default: "text",
     values: ~w(checkbox color date datetime-local email file hidden month number
-         password range radio search select tel text textarea time url week)
+         password range radio search select switch tel text textarea time url
+         week)
 
   attr :field, Phoenix.HTML.FormField,
     doc: "A form field struct, for example: @form[:name]"
@@ -1016,6 +1017,47 @@ defmodule Doggo do
     """
   end
 
+  def input(%{type: "switch"} = assigns) do
+    assigns =
+      assign_new(assigns, :checked, fn ->
+        Form.normalize_value("checkbox", assigns[:value])
+      end)
+
+    ~H"""
+    <div class={["field", field_error_class(@errors)]} phx-feedback-for={@name}>
+      <.label required={@validations[:required] || false} class="switch">
+        <span class="switch-label"><%= @label %></span>
+        <input type="hidden" name={@name} value="false" />
+        <input
+          type="checkbox"
+          role="switch"
+          name={@name}
+          id={@id}
+          value={@checked_value}
+          checked={@checked}
+          aria-describedby={input_aria_describedby(@id, @errors, @description)}
+          {@validations}
+          {@rest}
+        />
+        <span class="switch-state">
+          <span
+            class={if @checked, do: "switch-state-on", else: "switch-state-off"}
+            aria-hidden="true"
+          >
+            <%= if @checked do %>
+              On
+            <% else %>
+              Off
+            <% end %>
+          </span>
+        </span>
+      </.label>
+      <.field_errors for={@id} errors={@errors} />
+      <.field_description for={@id} description={@description} />
+    </div>
+    """
+  end
+
   def input(%{type: "select"} = assigns) do
     ~H"""
     <div class={["field", field_error_class(@errors)]} phx-feedback-for={@name}>
@@ -1492,6 +1534,52 @@ defmodule Doggo do
     """
   end
 
+  @doc """
+  Renders a switch as a button.
+
+  If you want to render a switch as part of a form, use the `input/1` component
+  with the type `"switch"` instead.
+
+  Note that this component only renders a button with a label, a state, and
+  `<span>` with the class `switch-control`. You will need to style the switch
+  control span with CSS in order to give it the appearance of a switch.
+
+  ## Examples
+
+      <.switch
+        label="Subscribe"
+        checked={true}
+        phx-click="toggle-subscription"
+      />
+  """
+
+  attr :label, :string, required: true
+  attr :on_text, :string, default: "On"
+  attr :off_text, :string, default: "Off"
+  attr :checked, :boolean, required: true
+  attr :rest, :global
+
+  def switch(assigns) do
+    ~H"""
+    <button type="button" role="switch" aria-checked={to_string(@checked)} {@rest}>
+      <span class="switch-label"><%= @label %></span>
+      <span class="switch-control"><span></span></span>
+      <span class="switch-state">
+        <span
+          class={if @checked, do: "switch-state-on", else: "switch-state-off"}
+          aria-hidden="true"
+        >
+          <%= if @checked do %>
+            <%= @on_text %>
+          <% else %>
+            <%= @off_text %>
+          <% end %>
+        </span>
+      </span>
+    </button>
+    """
+  end
+
   @doc """
   Renders a drawer with a `brand`, `top`, and `bottom` slot.