- 1.5.0

Switch

Renders a switch as a button.

Read more Read less

If you want to render a switch as part of a form, use the input/1 component with the type "switch" instead.

Note that this component only renders a button with a label, a state, and <span> with the class switch-control. You will need to style the switch control span with CSS in order to give it the appearance of a switch.

Maturity: Developing

Usage

<.switch
  label="Subscribe"
  checked={true}
  phx-click="toggle-subscription"
/>
Default
Open in playground 
<div style="display: grid; gap: 0.75rem">
  <.switch
    label="Email notifications"
    checked
    phx-click={%JS{}
  |> JS.toggle_attribute({"aria-checked", "true", "false"})
  |> JS.toggle_attribute({"hidden", "true"}, to: {:inner, ".switch-state-on"})
  |> JS.toggle_attribute({"hidden", "true"}, to: {:inner, ".switch-state-off"})
  }
   />
  <.switch
    label="Two-factor authentication"
    phx-click={%JS{}
  |> JS.toggle_attribute({"aria-checked", "true", "false"})
  |> JS.toggle_attribute({"hidden", "true"}, to: {:inner, ".switch-state-on"})
  |> JS.toggle_attribute({"hidden", "true"}, to: {:inner, ".switch-state-off"})
  }
   />
</div>
Custom text
Open in playground 
<div style="display: grid; gap: 0.75rem">
  <.switch
    label="Public profile"
    checked
    phx-click={%JS{}
  |> JS.toggle_attribute({"aria-checked", "true", "false"})
  |> JS.toggle_attribute({"hidden", "true"}, to: {:inner, ".switch-state-on"})
  |> JS.toggle_attribute({"hidden", "true"}, to: {:inner, ".switch-state-off"})
  }
    on_text="yes"
    off_text="no"
   />
  <.switch
    label="Show activity status"
    phx-click={%JS{}
  |> JS.toggle_attribute({"aria-checked", "true", "false"})
  |> JS.toggle_attribute({"hidden", "true"}, to: {:inner, ".switch-state-on"})
  |> JS.toggle_attribute({"hidden", "true"}, to: {:inner, ".switch-state-off"})
  }
    on_text="yes"
    off_text="no"
   />
</div>