PineUiPhoenix.Components.Switch (Pine UI v0.2.0)

Copy Markdown View Source

A toggle switch.

A port of the Pines switch.

<.switch name="notifications" label="Email notifications" />

Summary

Forms

Renders a toggle switch.

Forms

switch(assigns)

Renders a toggle switch.

Examples

<.switch name="notify" label="Email notifications" checked={@user.notify} />

<.switch
  label="Public profile"
  description="Anyone with the link can view it."
  phx-click="toggle-visibility"
/>

Accessibility

Renders a <button role="switch"> with aria-checked bound to the live state, which is the WAI-ARIA switch pattern. When name is set, a hidden input carries the value so the switch works inside a plain form post as well as under LiveView.

Attributes

  • id (:string) - Defaults to nil.
  • name (:string) - Emits a hidden input so the value submits with a form. Defaults to nil.
  • checked (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • label (:string) - Defaults to nil.
  • description (:string) - Defaults to nil.
  • size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
  • label_position (:string) - Which side of the switch the label sits on. Defaults to "right". Must be one of "left", or "right".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.