EssenceUI.Components.Switch (Essence UI v0.2.0)

Copy Markdown View Source

A Switch component for toggling between on/off states with support for various sizes, variants, and colors. The switch provides visual feedback for boolean state changes and can be used in forms, settings panels, and interactive controls.

Examples

<.switch />

<.switch checked />

<.switch size="3" variant="soft" color="blue" />

<.switch disabled />

<.switch name="notifications" value="enabled" checked />

Props

  • size - Switch size: "1", "2", "3" (default: "2")
  • variant - Switch variant: "surface", "classic", "soft" (default: "surface")
  • color - Color theme from accent color palette (default: none)
  • high_contrast - Increase color contrast (default: false)
  • checked - Controlled checked state (true/false)
  • default_checked - Initial checked state (default: false)
  • disabled - Whether the switch is disabled
  • name - Form name attribute
  • value - Form value attribute
  • Plus margin props (m, mx, my, mt, mr, mb, ml) for spacing control

Summary

Functions

switch(assigns)

Functions

switch(assigns)

Attributes

  • color (:string) - Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. Must be one of "gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", or "sky".
  • high_contrast (:boolean) - Whether to increase color contrast with the background.
  • m (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mx (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • my (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mt (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mr (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mb (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • ml (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • id (:string) - Defaults to nil.
  • size (:string) - Switch size from 1 to 3. Controls overall dimensions and thumb size. Defaults to "2". Must be one of "1", "2", or "3".
  • variant (:string) - Visual style variant. One of 'surface', 'classic', or 'soft'. Defaults to "surface". Must be one of "surface", "classic", or "soft".
  • default_checked (:boolean) - Initial checked state. If true, switch starts checked. Defaults to false.
  • checked (:boolean) - Controlled checked state. Can be true or false. Defaults to nil.
  • disabled (:boolean) - Whether the switch is disabled. Defaults to false.
  • required (:boolean) - Whether the switch is required. Defaults to false.
  • form (:string) - The form ID this switch belongs to. Defaults to nil.
  • on_checked_change (:string) - LiveView event to push when the checked state changes. Defaults to nil.
  • name (:string) - Form name attribute. Defaults to nil.
  • value (:string) - Form value attribute. Defaults to nil.
  • class (:string) - Additional CSS classes to add to the element. Defaults to nil.
  • style (:string) - Defaults to "".
  • Global attributes are accepted. Global attributes and event handlers. Supports all globals plus: ["aria-label", "aria-labelledby", "aria-describedby"].