SutraUI.Switch (Sutra UI v0.2.0)

View Source

A toggle control that allows the user to switch between checked and not checked.

Examples

# Basic switch
<.switch name="airplane_mode" />

# Switch with initial checked state
<.switch name="notifications" checked />

# Disabled switch
<.switch name="marketing_emails" disabled />

# Switch with phx-click for LiveView interactivity
<.switch name="dark_mode" phx-click="toggle_dark_mode" checked={@dark_mode} />

# Switch with phx-change inside a form
<.switch name="auto_save" phx-change="toggle_auto_save" checked={@auto_save} />

# Switch with accessibility attributes
<.switch
  name="email_notifications"
  id="email-notifications"
  aria-label="Enable email notifications"
  aria-describedby="email-help"
/>

Accessibility

  • Uses <input type="checkbox"> with role="switch"
  • Supports aria-label or aria-labelledby for labeling
  • Supports aria-describedby for helper text
  • Keyboard accessible (Space to toggle, Enter to submit forms)
  • Communicates checked state via aria-checked

Summary

Functions

switch(assigns)

Renders a switch component.

Functions

switch(assigns)

Renders a switch component.

Examples

<.switch name="airplane_mode" />
<.switch name="notifications" checked />
<.switch name="marketing_emails" disabled />

Attributes

  • id (:string) - The id of the switch input. Defaults to nil.
  • name (:string) (required) - The name of the switch input.
  • value (:string) - The value to submit when checked. Defaults to "true".
  • checked (:boolean) - Whether the switch is checked. Defaults to false.
  • disabled (:boolean) - Whether the switch is disabled. Defaults to false.
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes including ARIA. Supports all globals plus: ["form", "required", "aria-label", "aria-labelledby", "aria-describedby", "aria-required", "aria-invalid", "phx-click", "phx-change"].