PtahUi.Components.Toggle (PtahUI v0.1.0)

Toggle is a checkbox styled as a switch button.

Renders as a <label> track with a sliding ::before thumb. The actual <input type="checkbox"> is hidden inside and handles form/LiveView integration.

Two variants:

Standard: no inner block → sliding thumb only.
Icon variant: pass two SVGs as inner_block → first SVG visible when checked, second visible when unchecked.

Examples

<.toggle checked={@enabled} on_change="toggle-feature" />
<.toggle checked={@dark} color="primary" size="lg" on_change="toggle-dark" />
<.toggle checked={@silent} disabled />

<%!-- Icon variant: first svg = "on", second svg = "off" --%>
<.toggle checked={@on} on_change="toggle" color="success">
  <svg ...>checkmark</svg>
  <svg ...>X</svg>
</.toggle>

Summary

Functions

toggle(assigns)

Functions

toggle(assigns)

Attributes

checked (:boolean) - Defaults to false.
disabled (:boolean) - Defaults to false.
color (:string) - Defaults to nil.
size (:string) - Defaults to "md".
name (:string) - Defaults to nil.
id (:string) - Defaults to nil.
value (:string) - Defaults to nil.
on_change (:any) - phx-click event name sent when the toggle is clicked. Defaults to nil.
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block - When provided, renders as icon variant. Pass two SVGs: first = on icon, second = off icon.