Switch

<.switch name="setting" />

With Label

Add a label alongside the switch for context.

<div class="flex items-center justify-between">
  <label for="notifications-switch">Enable notifications</label>
  <.switch name="notifications" id="notifications-switch" />
</div>

Checked State

Use the checked attribute to set the initial state.

<.switch name="feature" checked />

Interactive Example

Use phx-click to handle toggle events.

<.switch
  name="airplane"
  id="airplane-switch"
  checked={@airplane_mode}
  phx-click="toggle_airplane"
/>

Disabled

Use the disabled attribute to prevent interaction.

<.switch name="disabled1" disabled />
<.switch name="disabled2" checked disabled />

Accessibility

The switch uses role="switch" and aria-checked for proper screen reader support.

• Keyboard: Press Space to toggle. Use Tab to navigate between controls.
• Always pair with a visible label or provide an aria-label for screen readers.