Switch Shared Partial

1. Copy shared partial files

Download all 1 shared partial files as a ZIP file.

After downloading, unzip and copy the switch/ folder to your app/views/shared/components/ directory.

Copy these files to your app/views/shared/components/switch/ directory:

Include :dark classes

<%#
  Switch Component
  A styled toggle switch input with label, description, and various states.

  Optional locals:
    - label: String (default: nil) - The switch label text
    - name: String (default: nil) - The input name attribute for form submission
    - id: String (default: auto-generated) - The input id attribute
    - value: String (default: "1") - The input value attribute
    - checked: Boolean (default: false) - Whether the switch is on
    - disabled: Boolean (default: false) - Whether the switch is disabled
    - required: Boolean (default: false) - Whether the switch is required
    - description: String (default: nil) - Optional description text below the label
    - size: String (default: "md") - Size: "sm" (small), "md" (medium), "lg" (large)
    - show_icons: Boolean (default: false) - Whether to show check/x icons inside the switch
    - label_position: String (default: "right") - Position of label: "left" or "right"
    - error: String (default: nil) - Error message to display
    - classes: String (default: nil) - Additional CSS classes for the wrapper
    - switch_classes: String (default: nil) - Additional CSS classes for the switch track
    - label_classes: String (default: nil) - Additional CSS classes for the label
%>

<% label ||= nil %>
<% name ||= nil %>
<% id ||= "switch_#{SecureRandom.hex(4)}" %>
<% value ||= "1" %>
<% checked ||= false %>
<% disabled ||= false %>
<% required ||= false %>
<% description ||= nil %>
<% size ||= "md" %>
<% show_icons ||= false %>
<% label_position ||= "right" %>
<% error ||= nil %>
<% classes ||= nil %>
<% switch_classes ||= nil %>
<% label_classes ||= nil %>

<%
  has_supporting_text = description.present? || error.present?
  custom_checked_background = switch_classes.to_s.match?(/(?:^|\s)(?:dark:)?peer-checked:bg-\S+/)

  # Base track classes
  base_track_classes = "relative rounded-full transition-all duration-150 ease-in-out " \
    "bg-neutral-200 border border-black/10 " \
    "group-hover:bg-neutral-300 " \
    "dark:bg-neutral-700 dark:border-white/10 dark:group-hover:bg-neutral-600 " \
    "peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-600 " \
    "dark:peer-focus-visible:outline-neutral-200"

  checked_track_classes = if custom_checked_background
    "peer-checked:border-white/10 dark:peer-checked:border-black/20"
  else
    "peer-checked:bg-neutral-800 peer-checked:group-hover:bg-neutral-700 peer-checked:border-white/10 " \
    "dark:peer-checked:bg-neutral-50 dark:peer-checked:group-hover:bg-neutral-100 dark:peer-checked:border-black/20"
  end

  # Size classes for track
  size_track_classes = case size.to_s
    when "sm" then "w-8 h-5"
    when "lg" then "w-14 h-8"
    else "w-10 h-6"
  end

  # State classes for track
  state_track_classes = disabled ? "opacity-50 cursor-not-allowed" : ""

  # Combined track classes
  computed_track_classes = [base_track_classes, checked_track_classes, size_track_classes, state_track_classes, switch_classes].compact.reject(&:empty?).join(" ")

  # Base thumb classes
  base_thumb_classes = "absolute bg-white rounded-full shadow-sm transition-all duration-150 ease-in-out " \
    "flex items-center justify-center " \
    "dark:bg-neutral-200 dark:peer-checked:bg-neutral-800"

  # Size classes for thumb
  size_thumb_classes = case size.to_s
    when "sm" then "top-[2px] left-[2px] w-4 h-4"
    when "lg" then "top-[4px] left-[4px] w-[24px] h-[24px]"
    else "top-[3px] left-[3px] w-[18px] h-[18px]"
  end

  # Translate classes for thumb
  size_thumb_translate = case size.to_s
    when "sm" then "peer-checked:translate-x-3"
    when "lg" then "peer-checked:translate-x-6"
    else "peer-checked:translate-x-4"
  end

  # Combined thumb classes
  computed_thumb_classes = [base_thumb_classes, size_thumb_classes, size_thumb_translate].join(" ")

  # Icon size classes
  icon_size_classes = case size.to_s
    when "sm" then "size-2.5"
    when "lg" then "size-4"
    else "size-3"
  end

  # Wrapper classes
  wrapper_base = "group flex"
  align_class = has_supporting_text ? "items-start" : "items-center"
  gap_class = label.present? ? "gap-2.5" : "gap-0"
  cursor_class = disabled ? "cursor-not-allowed" : "cursor-pointer"
  direction_class = label_position.to_s == "left" ? "flex-row-reverse justify-end" : ""
  wrapper_classes = [wrapper_base, align_class, gap_class, cursor_class, direction_class, classes].compact.reject(&:empty?).join(" ")

  control_wrapper_classes = ["relative flex-shrink-0", (has_supporting_text && label.present?) ? "mt-0.5" : nil].compact.join(" ")

  # Label size class
  label_size_class = case size.to_s
    when "sm" then has_supporting_text ? "text-xs leading-snug" : "text-xs leading-none"
    when "lg" then has_supporting_text ? "text-base leading-snug" : "text-base leading-none"
    else has_supporting_text ? "text-sm leading-snug" : "text-sm leading-none"
  end

  # Label color class
  label_color_class = if disabled
    "text-neutral-400 dark:text-neutral-500"
  elsif error.present?
    "text-red-700 dark:text-red-400"
  else
    "text-neutral-700 dark:text-neutral-300"
  end

  # Combined label classes
  computed_label_classes = ["font-medium select-none", label_size_class, label_color_class, label_classes].compact.reject(&:empty?).join(" ")

  # Description classes
  desc_size_class = case size.to_s
    when "sm" then "text-[11px]"
    when "lg" then "text-sm"
    else "text-xs"
  end
  desc_color_class = disabled ? "text-neutral-400 dark:text-neutral-500" : "text-neutral-500 dark:text-neutral-400"
  description_classes = [desc_size_class, desc_color_class, "leading-normal"].join(" ")

  # Error classes
  error_size_class = case size.to_s
    when "sm" then "text-[11px]"
    when "lg" then "text-sm"
    else "text-xs"
  end
  error_classes = [error_size_class, "text-red-600 dark:text-red-400 leading-normal"].join(" ")

  text_content_classes = ["min-w-0 flex-1 flex flex-col leading-snug", has_supporting_text ? "gap-0.5" : "gap-0"].join(" ")
%>

<label class="<%= wrapper_classes %>">
  <div class="<%= control_wrapper_classes %>">
    <input
      type="checkbox"
      id="<%= id %>"
      <% if name.present? %>name="<%= name %>"<% end %>
      value="<%= value %>"
      class="sr-only peer"
      <% if checked %>checked<% end %>
      <% if disabled %>disabled<% end %>
      <% if required %>required<% end %>
    >
    <!-- Track -->
    <div class="<%= computed_track_classes %>"></div>
    <!-- Thumb -->
    <div class="<%= computed_thumb_classes %>">
      <% if show_icons %>
        <!-- X icon for unchecked state -->
        <svg xmlns="http://www.w3.org/2000/svg" class="<%= icon_size_classes %> text-neutral-400 transition-all duration-150 ease-in-out group-has-[:checked]:opacity-0 dark:text-neutral-500" viewBox="0 0 20 20">
          <g fill="currentColor">
            <line x1="7" y1="7" x2="13" y2="13" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
            <line x1="7" y1="13" x2="13" y2="7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
          </g>
        </svg>
        <!-- Checkmark icon for checked state -->
        <svg xmlns="http://www.w3.org/2000/svg" class="absolute <%= icon_size_classes %> text-neutral-700 transition-all duration-150 ease-in-out opacity-0 group-has-[:checked]:opacity-100 dark:text-neutral-100" viewBox="0 0 20 20">
          <g fill="currentColor">
            <polyline points="6.5 10.5 8.75 13 13.5 7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
          </g>
        </svg>
      <% end %>
    </div>
  </div>

  <% if label.present? %>
    <div class="<%= text_content_classes %>">
      <span class="<%= computed_label_classes %>">
        <%= label %>
        <% if required %><span class="text-red-500">*</span><% end %>
      </span>
      <% if description.present? %>
        <p class="<%= description_classes %>">
          <%= description %>
        </p>
      <% end %>
      <% if error.present? %>
        <p class="<%= error_classes %>"><%= error %></p>
      <% end %>
    </div>
  <% end %>
</label>

2. Usage example

Include :dark classes

<!-- Basic switch without label -->
<%= render "shared/components/switch/switch" %>

<!-- Switch with label -->
<%= render "shared/components/switch/switch",
  label: "Enable notifications" %>

<!-- Switch with name for form submission -->
<%= render "shared/components/switch/switch",
  label: "Dark mode",
  name: "user[dark_mode]",
  checked: true %>

<!-- Switch with custom id -->
<%= render "shared/components/switch/switch",
  label: "Auto-save",
  name: "settings[auto_save]",
  id: "auto-save-switch" %>

<!-- Disabled switch -->
<%= render "shared/components/switch/switch",
  label: "Premium feature",
  disabled: true %>

<!-- Disabled and checked -->
<%= render "shared/components/switch/switch",
  label: "Always enabled",
  checked: true,
  disabled: true %>

<!-- Required switch -->
<%= render "shared/components/switch/switch",
  label: "Accept terms of service",
  name: "accept_terms",
  required: true %>

<!-- With description -->
<%= render "shared/components/switch/switch",
  label: "Email notifications",
  name: "settings[email]",
  description: "Receive updates about your account via email" %>

<!-- With description (checked) -->
<%= render "shared/components/switch/switch",
  label: "Push notifications",
  name: "settings[push]",
  description: "Get real-time alerts in your browser",
  checked: true %>

<!-- With error message -->
<%= render "shared/components/switch/switch",
  label: "Enable two-factor authentication",
  name: "security[2fa]",
  error: "Two-factor authentication is required for admin accounts" %>

<!-- Small size -->
<%= render "shared/components/switch/switch",
  label: "Compact toggle",
  size: "sm" %>

<!-- Large size -->
<%= render "shared/components/switch/switch",
  label: "Prominent toggle",
  size: "lg" %>

<!-- Small with description -->
<%= render "shared/components/switch/switch",
  label: "Compact option",
  description: "A smaller switch with description",
  size: "sm" %>

<!-- Large with description -->
<%= render "shared/components/switch/switch",
  label: "Prominent option",
  description: "A larger switch for emphasis",
  size: "lg" %>

<!-- With icons inside -->
<%= render "shared/components/switch/switch",
  label: "Show icons",
  show_icons: true %>

<!-- With icons (checked) -->
<%= render "shared/components/switch/switch",
  label: "Icons enabled",
  show_icons: true,
  checked: true %>

<!-- Label on left -->
<%= render "shared/components/switch/switch",
  label: "Label on left side",
  label_position: "left" %>

<!-- With custom wrapper classes -->
<%= render "shared/components/switch/switch",
  label: "Custom styled",
  classes: "p-4 bg-neutral-50 dark:bg-neutral-800 rounded-lg" %>

<!-- With custom switch track classes -->
<%= render "shared/components/switch/switch",
  label: "Blue switch",
  checked: true,
  switch_classes: "peer-checked:bg-blue-600 peer-checked:group-hover:bg-blue-500 dark:peer-checked:bg-blue-500" %>

<!-- All options combined -->
<%= render "shared/components/switch/switch",
  label: "Full featured switch",
  name: "full_featured",
  id: "full-featured-switch",
  value: "yes",
  description: "This switch demonstrates all available options",
  size: "md",
  show_icons: true,
  required: true %>

Rendered usage example

Switch ViewComponent

1. Ensure the gem is installed

gem "view_component", "~> 4.2"

2. Copy component files

Download all 2 component files as a ZIP file.

Download all files (ZIP)

After downloading, unzip and copy the switch/ folder to your app/components/ directory.

Copy these files to your app/components/switch/ directory:

Include :dark classes

<label class="<%= wrapper_classes %>">
  <div class="<%= control_wrapper_classes %>">
    <input
      type="checkbox"
      id="<%= @id %>"
      <% if @name.present? %>name="<%= @name %>"<% end %>
      value="<%= @value %>"
      class="sr-only peer"
      <% if @checked %>checked<% end %>
      <% if @disabled %>disabled<% end %>
      <% if @required %>required<% end %>
    >
    <!-- Track -->
    <div class="<%= track_classes %>"></div>
    <!-- Thumb -->
    <div class="<%= thumb_classes %>">
      <% if @show_icons %>
        <!-- X icon for unchecked state -->
        <svg xmlns="http://www.w3.org/2000/svg" class="<%= icon_size_classes %> text-neutral-400 transition-all duration-150 ease-in-out group-has-[:checked]:opacity-0 dark:text-neutral-500" viewBox="0 0 20 20">
          <g fill="currentColor">
            <line x1="7" y1="7" x2="13" y2="13" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
            <line x1="7" y1="13" x2="13" y2="7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line>
          </g>
        </svg>
        <!-- Checkmark icon for checked state -->
        <svg xmlns="http://www.w3.org/2000/svg" class="absolute <%= icon_size_classes %> text-neutral-700 transition-all duration-150 ease-in-out opacity-0 group-has-[:checked]:opacity-100 dark:text-neutral-100" viewBox="0 0 20 20">
          <g fill="currentColor">
            <polyline points="6.5 10.5 8.75 13 13.5 7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
          </g>
        </svg>
      <% end %>
    </div>
  </div>

  <% if @label.present? %>
    <div class="<%= text_content_classes %>">
      <span class="<%= label_classes %>">
        <%= @label %>
        <% if @required %><span class="text-red-500">*</span><% end %>
      </span>
      <% if @description.present? %>
        <p class="<%= description_classes %>">
          <%= @description %>
        </p>
      <% end %>
      <% if @error.present? %>
        <p class="<%= error_classes %>"><%= @error %></p>
      <% end %>
    </div>
  <% end %>
</label>

Include :dark classes

# frozen_string_literal: true

module Switch
  class Component < ViewComponent::Base
    SIZES = %i[sm md lg].freeze
    LABEL_POSITIONS = %i[left right].freeze

    # @param label [String] The switch label text (optional if using just the switch)
    # @param name [String] The input name attribute for form submission
    # @param id [String] The input id attribute (auto-generated if not provided)
    # @param value [String] The input value attribute (default: "1")
    # @param checked [Boolean] Whether the switch is on
    # @param disabled [Boolean] Whether the switch is disabled
    # @param required [Boolean] Whether the switch is required
    # @param description [String] Optional description text below the label
    # @param size [Symbol] Size: :sm (small), :md (medium/default), :lg (large)
    # @param show_icons [Boolean] Whether to show check/x icons inside the switch
    # @param label_position [Symbol] Position of label: :left or :right (default)
    # @param error [String] Error message to display
    # @param classes [String] Additional CSS classes for the wrapper
    # @param switch_classes [String] Additional CSS classes for the switch track
    # @param label_classes [String] Additional CSS classes for the label element
    def initialize(
      label: nil,
      name: nil,
      id: nil,
      value: "1",
      checked: false,
      disabled: false,
      required: false,
      description: nil,
      size: :md,
      show_icons: false,
      label_position: :right,
      error: nil,
      classes: nil,
      switch_classes: nil,
      label_classes: nil
    )
      super()
      @label = label
      @name = name
      @id = id || generate_id
      @value = value
      @checked = checked
      @disabled = disabled
      @required = required
      @description = description
      @size = SIZES.include?(size) ? size : :md
      @show_icons = show_icons
      @label_position = LABEL_POSITIONS.include?(label_position) ? label_position : :right
      @error = error
      @classes = classes
      @switch_classes = switch_classes
      @label_classes = label_classes
    end

    def wrapper_classes
      base = "group flex"
      align_class = supporting_text? ? "items-start" : "items-center"
      gap_class = @label.present? ? "gap-2.5" : "gap-0"
      cursor_class = @disabled ? "cursor-not-allowed" : "cursor-pointer"
      direction_class = @label_position == :left ? "flex-row-reverse justify-end" : ""

      [base, align_class, gap_class, cursor_class, direction_class, @classes].compact.reject(&:empty?).join(" ")
    end

    def control_wrapper_classes
      classes = ["relative flex-shrink-0"]
      classes << "mt-0.5" if supporting_text? && @label.present?
      classes.join(" ")
    end

    def track_classes
      [
        base_track_classes,
        checked_track_classes,
        size_track_classes,
        state_track_classes,
        @switch_classes
      ].compact.reject(&:empty?).join(" ")
    end

    def thumb_classes
      [
        base_thumb_classes,
        size_thumb_classes,
        size_thumb_translate
      ].compact.reject(&:empty?).join(" ")
    end

    def label_classes
      base = "font-medium select-none"
      size_class = label_size_classes
      color_class = if @disabled
                      "text-neutral-400 dark:text-neutral-500"
                    elsif @error.present?
                      "text-red-700 dark:text-red-400"
                    else
                      "text-neutral-700 dark:text-neutral-300"
                    end

      [base, size_class, color_class, @label_classes].compact.reject(&:empty?).join(" ")
    end

    def description_classes
      size_class = case @size
                   when :sm then "text-[11px]"
                   when :lg then "text-sm"
                   else "text-xs"
                   end
      color_class = @disabled ? "text-neutral-400 dark:text-neutral-500" : "text-neutral-500 dark:text-neutral-400"

      [size_class, color_class, "leading-normal"].join(" ")
    end

    def error_classes
      size_class = case @size
                   when :sm then "text-[11px]"
                   when :lg then "text-sm"
                   else "text-xs"
                   end

      [size_class, "text-red-600 dark:text-red-400 leading-normal"].join(" ")
    end

    def text_content_classes
      gap_class = supporting_text? ? "gap-0.5" : "gap-0"
      ["min-w-0 flex-1 flex flex-col leading-snug", gap_class].join(" ")
    end

    def icon_size_classes
      case @size
      when :sm then "size-2.5"
      when :lg then "size-4"
      else "size-3"
      end
    end

    private

    def supporting_text?
      @description.present? || @error.present?
    end

    def label_size_classes
      case @size
      when :sm then supporting_text? ? "text-xs leading-snug" : "text-xs leading-none"
      when :lg then supporting_text? ? "text-base leading-snug" : "text-base leading-none"
      else supporting_text? ? "text-sm leading-snug" : "text-sm leading-none"
      end
    end

    def generate_id
      "switch_#{SecureRandom.hex(4)}"
    end

    def base_track_classes
      "relative rounded-full transition-all duration-150 ease-in-out " \
        "bg-neutral-200 border border-black/10 " \
        "group-hover:bg-neutral-300 " \
        "dark:bg-neutral-700 dark:border-white/10 dark:group-hover:bg-neutral-600 " \
        "peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-600 " \
        "dark:peer-focus-visible:outline-neutral-200"
    end

    def checked_track_classes
      classes = ["peer-checked:border-white/10", "dark:peer-checked:border-black/20"]
      return classes.join(" ") if custom_checked_background?

      classes.unshift(
        "peer-checked:bg-neutral-800",
        "peer-checked:group-hover:bg-neutral-700",
        "dark:peer-checked:bg-neutral-50",
        "dark:peer-checked:group-hover:bg-neutral-100"
      )
      classes.join(" ")
    end

    def size_track_classes
      case @size
      when :sm then "w-8 h-5"
      when :lg then "w-14 h-8"
      else "w-10 h-6"
      end
    end

    def state_track_classes
      classes = []
      classes << "opacity-50 cursor-not-allowed" if @disabled
      classes.join(" ")
    end

    def base_thumb_classes
      "absolute bg-white rounded-full shadow-sm transition-all duration-150 ease-in-out " \
        "flex items-center justify-center " \
        "dark:bg-neutral-200 dark:peer-checked:bg-neutral-800"
    end

    def size_thumb_classes
      case @size
      when :sm then "top-[2px] left-[2px] w-4 h-4"
      when :lg then "top-[4px] left-[4px] w-[24px] h-[24px]"
      else "top-[3px] left-[3px] w-[18px] h-[18px]"
      end
    end

    def size_thumb_translate
      case @size
      when :sm then "peer-checked:translate-x-3"
      when :lg then "peer-checked:translate-x-6"
      else "peer-checked:translate-x-4"
      end
    end

    def custom_checked_background?
      classes = @switch_classes.to_s
      classes.match?(/(?:^|\s)(?:dark:)?peer-checked:bg-\S+/)
    end

    attr_reader :label, :name, :id, :value, :checked, :disabled, :required, :description, :size, :show_icons, :label_position, :error
  end
end

3. Usage example

Include :dark classes

<!-- Basic switch without label -->
<%= render Switch::Component.new %>

<!-- Switch with label -->
<%= render Switch::Component.new(
  label: "Enable notifications"
) %>

<!-- Switch with name for form submission -->
<%= render Switch::Component.new(
  label: "Dark mode",
  name: "user[dark_mode]",
  checked: true
) %>

<!-- Switch with custom id -->
<%= render Switch::Component.new(
  label: "Auto-save",
  name: "settings[auto_save]",
  id: "auto-save-switch"
) %>

<!-- Disabled switch -->
<%= render Switch::Component.new(
  label: "Premium feature",
  disabled: true
) %>

<!-- Disabled and checked -->
<%= render Switch::Component.new(
  label: "Always enabled",
  checked: true,
  disabled: true
) %>

<!-- Required switch -->
<%= render Switch::Component.new(
  label: "Accept terms of service",
  name: "accept_terms",
  required: true
) %>

<!-- With description -->
<%= render Switch::Component.new(
  label: "Email notifications",
  name: "settings[email]",
  description: "Receive updates about your account via email"
) %>

<!-- With description (checked) -->
<%= render Switch::Component.new(
  label: "Push notifications",
  name: "settings[push]",
  description: "Get real-time alerts in your browser",
  checked: true
) %>

<!-- With error message -->
<%= render Switch::Component.new(
  label: "Enable two-factor authentication",
  name: "security[2fa]",
  error: "Two-factor authentication is required for admin accounts"
) %>

<!-- Small size -->
<%= render Switch::Component.new(
  label: "Compact toggle",
  size: :sm
) %>

<!-- Large size -->
<%= render Switch::Component.new(
  label: "Prominent toggle",
  size: :lg
) %>

<!-- Small with description -->
<%= render Switch::Component.new(
  label: "Compact option",
  description: "A smaller switch with description",
  size: :sm
) %>

<!-- Large with description -->
<%= render Switch::Component.new(
  label: "Prominent option",
  description: "A larger switch for emphasis",
  size: :lg
) %>

<!-- With icons inside -->
<%= render Switch::Component.new(
  label: "Show icons",
  show_icons: true
) %>

<!-- With icons (checked) -->
<%= render Switch::Component.new(
  label: "Icons enabled",
  show_icons: true,
  checked: true
) %>

<!-- Label on left -->
<%= render Switch::Component.new(
  label: "Label on left side",
  label_position: :left
) %>

<!-- With custom wrapper classes -->
<%= render Switch::Component.new(
  label: "Custom styled",
  classes: "p-4 bg-neutral-50 dark:bg-neutral-800 rounded-lg"
) %>

<!-- With custom switch track classes -->
<%= render Switch::Component.new(
  label: "Blue switch",
  checked: true,
  switch_classes: "peer-checked:bg-blue-600 peer-checked:group-hover:bg-blue-500 dark:peer-checked:bg-blue-500"
) %>

<!-- All options combined -->
<%= render Switch::Component.new(
  label: "Full featured switch",
  name: "full_featured",
  id: "full-featured-switch",
  value: "yes",
  description: "This switch demonstrates all available options",
  size: :md,
  show_icons: true,
  required: true
) %>

Rendered usage example

Switch Rails Components

Switch component examples for your Ruby on Rails application. A switch is a toggle button that allows the user to turn an option on or off.

Examples

Basic Switch

A simple switch component.

Include :dark classes

<label class="group flex items-center cursor-pointer">
  <div class="relative">
    <input type="checkbox" class="sr-only peer" name="tailwind_switch" id="tailwind_switch">
    <!-- Background element -->
    <div class="w-10 h-6 bg-neutral-200 border border-black/10 rounded-full transition-all duration-150 ease-in-out cursor-pointer group-hover:bg-[#dcdcdb] peer-checked:bg-[#404040] peer-checked:group-hover:bg-neutral-600 peer-checked:border-white/10 dark:bg-neutral-700 dark:border-white/10 dark:group-hover:bg-neutral-600 dark:peer-checked:bg-neutral-50 dark:peer-checked:group-hover:bg-neutral-100 dark:peer-checked:border-black/20 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-600 dark:peer-focus-visible:outline-neutral-200"></div>
    <!-- Round element with icons inside -->
    <div class="absolute top-[3px] left-[3px] w-[18px] h-[18px] bg-white rounded-full shadow-sm transition-all duration-150 ease-in-out peer-checked:translate-x-4 flex items-center justify-center dark:bg-neutral-200 dark:peer-checked:bg-neutral-800"></div>
  </div>
</label>

Basic Switch with Active State

A simple switch component with active state, you will see the switch grow in size when you click on it, and shrink when you release your click.

Include :dark classes

<label class="group flex items-center cursor-pointer">
  <div class="relative">
    <input type="checkbox" class="sr-only peer" name="tailwind_switch" id="tailwind_switch">
    <!-- Background element -->
    <div class="w-10 h-6 bg-neutral-200 border border-black/10 rounded-full transition-all duration-150 ease-in-out cursor-pointer group-hover:bg-[#dcdcdb] peer-checked:bg-[#404040] peer-checked:group-hover:bg-neutral-600 peer-checked:border-white/10 dark:bg-neutral-700 dark:border-white/10 dark:group-hover:bg-neutral-600 dark:peer-checked:bg-neutral-50 dark:peer-checked:group-hover:bg-neutral-100 dark:peer-checked:border-black/20 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-600 dark:peer-focus-visible:outline-neutral-200"></div>
    <!-- Round element with icons inside -->
    <div class="absolute top-[3px] left-[3px] w-[18px] h-[18px] bg-white rounded-full shadow-sm transition-all duration-150 ease-in-out group-active:w-[22px] peer-checked:group-active:-ml-1 peer-checked:translate-x-4 flex items-center justify-center dark:bg-neutral-200 dark:peer-checked:bg-neutral-800"></div>
  </div>
</label>

Switch with Icon

Switch with an On/Off icon.

Include :dark classes

<label class="group flex items-center cursor-pointer">
  <div class="relative">
    <input type="checkbox" class="sr-only peer" name="tailwind_switch" id="tailwind_switch">
    <!-- Background element -->
    <div class="w-10 h-6 bg-neutral-200 border border-black/10 rounded-full transition-all duration-150 ease-in-out cursor-pointer group-hover:bg-[#dcdcdb] peer-checked:bg-[#404040] peer-checked:group-hover:bg-neutral-600 peer-checked:border-white/10 dark:bg-neutral-700 dark:border-white/10 dark:group-hover:bg-neutral-600 dark:peer-checked:bg-neutral-50 dark:peer-checked:group-hover:bg-neutral-100 dark:peer-checked:border-black/20 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-600 dark:peer-focus-visible:outline-neutral-200"></div>
    <!-- Round element with icons inside -->
    <div class="absolute top-[3px] left-[3px] w-[18px] h-[18px] bg-white rounded-full shadow-sm transition-all duration-150 ease-in-out peer-checked:translate-x-4 flex items-center justify-center dark:bg-neutral-200 dark:peer-checked:bg-neutral-800">
      <!-- X icon for unchecked state -->
      <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-neutral-400 transition-all duration-150 ease-in-out group-has-[:checked]:opacity-0 dark:text-neutral-500" width="20" height="20" viewBox="0 0 20 20"><g fill="currentColor"><line x1="7" y1="7" x2="13" y2="13" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line><line x1="7" y1="13" x2="13" y2="7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line></g></svg>
      <!-- Checkmark icon for checked state -->
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute size-4 text-neutral-700 transition-all duration-150 ease-in-out opacity-0 group-has-[:checked]:opacity-100 dark:text-neutral-100" width="20" height="20" viewBox="0 0 20 20"><g fill="currentColor"><polyline points="6.5 10.5 8.75 13 13.5 7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline></g></svg>
    </div>
  </div>
</label>

Stepper

Tabs