PineUiPhoenix.Switch (Pine UI v0.1.3)
View SourceProvides 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
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)
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)
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)