Salad UI

Switch

Renders a switch component.

Read more Read less

Props

  • :id - The id to be applied to the input element
  • :name - The name to be applied to the input element
  • :class - Additional CSS classes
  • :value - The current value of the switch
  • :default-value - The default value of the switch
  • :field - Phoenix form field
  • :disabled - Whether the switch is disabled
  • :on-checked-changed - Handler for value change event
Basic Open in playground 
<.switch id="switch-basic-default"/>
<.switch id="switch-basic-checked" checked/>
<.switch disabled id="switch-basic-disabled"/>
<.switch disabled id="switch-basic-checked-disabled" checked/>
With label Open in playground 
<div class="flex items-center space-x-2">
  <.switch id="switch-single-with-label" checked on-checked-changed="on_checked"/>
  <label for="switch-with-label">Click me</label>
</div>