AvenUI.Components.Toggle (AvenUI v1.0.0)

Copy Markdown View Source

Toggle switch component — accessible boolean input.

Renders as a styled checkbox that looks like a native iOS/Android switch. Works with phx-change for real-time LiveView updates.

Examples

<.toggle name="dark_mode" checked={@settings.dark_mode} label="Dark mode" />

<.toggle
  field={@form[:notifications]}
  label="Email notifications"
  hint="Receive updates via email"
/>

<.toggle name="enabled" checked={false} label="Auto-deploy" size="lg" />

Summary

Functions

toggle(assigns)

Renders a toggle switch for boolean input.

Functions

toggle(assigns)

Renders a toggle switch for boolean input.

Attributes

  • id (:any) - Defaults to nil.
  • name (:any) - Defaults to nil.
  • value (:any) - Defaults to "true".
  • checked (:boolean) - Defaults to false.
  • label (:string) - Defaults to nil.
  • hint (:string) - Defaults to nil.
  • size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
  • class (:string) - Defaults to nil.
  • field (Phoenix.HTML.FormField) - Binds from a Phoenix form field.
  • Global attributes are accepted. Supports all globals plus: ["phx-change", "phx-blur", "disabled"].