PineUiPhoenix.Switch (Pine UI v0.1.3)

View Source

Provides toggle switch components for binary choices.

The Switch module offers toggle switches that provide a visual way to enable or disable options. These components are designed to be accessible and integrate well with Phoenix forms.

Summary

Functions

Renders a basic toggle switch component.

Renders a card-style toggle switch component.

Renders a labeled toggle switch component with a descriptive label on each side.

Functions

basic(assigns)

Renders a basic toggle switch component.

This component creates a simple on/off toggle switch for boolean options.

Examples

<.basic
  id="notifications"
  name="user[notifications]"
  value={@user.notifications}
  label="Enable notifications"
/>

<.basic
  id="dark_mode"
  value={false}
  label="Dark mode"
  size="sm"
  variant="indigo"
/>

Options

  • :id - The ID for the switch element (required)
  • :name - The name attribute for form submission (optional, defaults to ID)
  • :value - Whether the switch is on or off (optional, defaults to false)
  • :label - Text label for the switch (optional)
  • :help_text - Help text displayed below the switch (optional)
  • :disabled - Whether the switch is disabled (optional, defaults to false)
  • :size - Size of the switch: "sm", "md", "lg" (optional, defaults to "md")
  • :variant - Color variant: "indigo", "blue", "green", "red", "amber" (optional, defaults to "indigo")
  • :class - Additional CSS classes for the switch container (optional)
  • :label_class - CSS classes for the label text (optional)
  • :phx_change - Phoenix change event name (optional)

card_switch(assigns)

Renders a card-style toggle switch component.

This component creates an elegant card-style switch with label and icon.

Examples

<.card_switch
  id="auto_renewal"
  value={true}
  title="Auto-renewal"
  description="Automatically renew your subscription"
  icon={~H"<svg class='h-6 w-6 text-indigo-600' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'>
    <path stroke-linecap='round' stroke-linejoin='round' d='M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99' />
  </svg>"}
/>

Options

  • :id - The ID for the switch element (required)
  • :name - The name attribute for form submission (optional, defaults to ID)
  • :value - Whether the switch is on or off (optional, defaults to false)
  • :title - The card title text (optional)
  • :description - Descriptive text for the switch (optional)
  • :icon - Icon markup to display (optional)
  • :disabled - Whether the switch is disabled (optional, defaults to false)
  • :variant - Color variant: "indigo", "blue", "green", "red", "amber" (optional, defaults to "indigo")
  • :class - Additional CSS classes for the card container (optional)
  • :phx_change - Phoenix change event name (optional)

labeled_switch(assigns)

Renders a labeled toggle switch component with a descriptive label on each side.

This component creates a switch with labels for both on and off states.

Examples

<.labeled_switch
  id="status"
  name="project[status]"
  value={@project.status}
  left_label="Draft"
  right_label="Published"
/>

Options

  • :id - The ID for the switch element (required)
  • :name - The name attribute for form submission (optional, defaults to ID)
  • :value - Whether the switch is on or off (optional, defaults to false)
  • :left_label - Text label for the off state (optional, defaults to "Off")
  • :right_label - Text label for the on state (optional, defaults to "On")
  • :help_text - Help text displayed below the switch (optional)
  • :disabled - Whether the switch is disabled (optional, defaults to false)
  • :size - Size of the switch: "sm", "md", "lg" (optional, defaults to "md")
  • :variant - Color variant: "indigo", "blue", "green", "red", "amber" (optional, defaults to "indigo")
  • :class - Additional CSS classes for the switch container (optional)
  • :phx_change - Phoenix change event name (optional)