Switch

<div class="flex items-center space-x-2">
  <%= render "ui/switch", id: "airplane-mode" %>
  <%= render "ui/label", for: "airplane-mode" do %>Airplane Mode<% end %>
</div>

<div class="flex items-center space-x-2">
  <%= render UI::Switch.new(id: "airplane-mode") %>
  <%= render UI::Label.new(for: "airplane-mode") { "Airplane Mode" } %>
</div>

<div class="flex items-center space-x-2">
  <%= render UI::SwitchComponent.new(id: "airplane-mode") %>
  <%= render(UI::LabelComponent.new(for: "airplane-mode")) { "Airplane Mode" } %>
</div>

<div class="flex items-center space-x-2">
  <%= render "ui/switch", id: "notifications", checked: true %>
  <%= render "ui/label", for: "notifications" do %>Enable Notifications<% end %>
</div>

<div class="flex items-center space-x-2">
  <%= render UI::Switch.new(id: "notifications", checked: true) %>
  <%= render UI::Label.new(for: "notifications") { "Enable Notifications" } %>
</div>

<div class="flex items-center space-x-2">
  <%= render UI::SwitchComponent.new(id: "notifications", checked: true) %>
  <%= render(UI::LabelComponent.new(for: "notifications")) { "Enable Notifications" } %>
</div>

<div class="flex items-start space-x-4">
  <%= render "ui/switch", id: "marketing" %>
  <div class="space-y-0.5">
    <%= render "ui/label", for: "marketing" do %>Marketing emails<% end %>
    <p class="text-sm text-muted-foreground">Receive emails about new products, features, and more.</p>
  </div>
</div>

<div class="flex items-start space-x-4">
  <%= render UI::Switch.new(id: "marketing") %>
  <div class="space-y-0.5">
    <%= render UI::Label.new(for: "marketing") { "Marketing emails" } %>
    <p class="text-sm text-muted-foreground">Receive emails about new products, features, and more.</p>
  </div>
</div>

<div class="flex items-start space-x-4">
  <%= render UI::SwitchComponent.new(id: "marketing") %>
  <div class="space-y-0.5">
    <%= render(UI::LabelComponent.new(for: "marketing")) { "Marketing emails" } %>
    <p class="text-sm text-muted-foreground">Receive emails about new products, features, and more.</p>
  </div>
</div>

<div class="flex items-center space-x-2">
  <%= render "ui/switch", id: "disabled-switch", disabled: true %>
  <%= render "ui/label", for: "disabled-switch" do %>Disabled<% end %>
</div>

<div class="flex items-center space-x-2">
  <%= render UI::Switch.new(id: "disabled-switch", disabled: true) %>
  <%= render UI::Label.new(for: "disabled-switch") { "Disabled" } %>
</div>

<div class="flex items-center space-x-2">
  <%= render UI::SwitchComponent.new(id: "disabled-switch", disabled: true) %>
  <%= render(UI::LabelComponent.new(for: "disabled-switch")) { "Disabled" } %>
</div>