Tailwind CSS Switches Blocks

Switches

Switch patterns for alerts, preferences, newsletters, settings lists, and grid-based toggle controls.

Alert Notification Toggle Pro

Compact alert row pairs an icon and helper copy with an end-aligned single switch.

<div class="bg-layer border border-layer-line rounded-xl shadow-xs py-2 px-3" role="alert" tabindex="-1" aria-labelledby="hs-pro-dpna-label">
                      <div class="flex items-center gap-x-3">
                        <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
                        <div class="grow">
                          <h3 id="hs-pro-dpna-label" class="text-sm text-foreground font-semibold">
                            Push notifications
                          </h3>
                          <p class="text-sm text-muted-foreground-2">
                            Automatically send me notifications
                          </p>
                        </div>

Open related admin dashboard template

Icon Preference Switch List Pro

Vertical list groups icon-led preference rows with one switch control per setting.

<div class="-mx-3 flex flex-col gap-y-1">
                      
                      <label for="hs-pro-pysw1" class="py-2 px-3 group flex justify-between items-center gap-x-3 cursor-pointer hover:bg-muted-hover rounded-2xl">
                        <span class="grow">
                          <span class="flex items-center gap-x-3">
                            <span class="shrink-0 size-11 inline-flex justify-center items-center bg-surface text-surface-foreground rounded-full group-hover:bg-surface-hover group-focus:bg-surface-focus">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z"/><path d="M14 8H8"/><path d="M16 12H8"/><path d="M13 16H8"/></svg>
                            </span>
                            <span class="grow">
                              <span class="block text-sm text-foreground">
                                ATM withdrawals
                              </span>
                            </span>
                          </span>
                        </span>

<label for="hs-pro-pysw2" class="py-2 px-3 group flex justify-between items-center gap-x-3 cursor-pointer hover:bg-muted-hover rounded-2xl">
                        <span class="grow">
                          <span class="flex items-center gap-x-3">
                            <span class="shrink-0 size-11 inline-flex justify-center items-center bg-surface text-surface-foreground rounded-full group-hover:bg-surface-hover group-focus:bg-surface-focus">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.54 15H17a2 2 0 0 0-2 2v4.54"/><path d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17"/><path d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05"/><circle cx="12" cy="12" r="10"/></svg>
                            </span>
                            <span class="grow">
                              <span class="block text-sm text-foreground">
                                Online transactions
                              </span>
                            </span>
                          </span>
                        </span>

<label for="hs-pro-pysw3" class="py-2 px-3 group flex justify-between items-center gap-x-3 cursor-pointer hover:bg-muted-hover rounded-2xl">
                        <span class="grow">
                          <span class="flex items-center gap-x-3">
                            <span class="shrink-0 size-11 inline-flex justify-center items-center bg-surface text-surface-foreground rounded-full group-hover:bg-surface-hover group-focus:bg-surface-focus">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
                            </span>
                            <span class="grow">
                              <span class="block text-sm text-foreground">
                                Swipe payments
                              </span>
                            </span>
                          </span>
                        </span>

<label for="hs-pro-pysw4" class="py-2 px-3 group flex justify-between items-center gap-x-3 cursor-pointer hover:bg-muted-hover rounded-2xl">
                        <span class="grow">
                          <span class="flex items-center gap-x-3">
                            <span class="shrink-0 size-11 inline-flex justify-center items-center bg-surface text-surface-foreground rounded-full group-hover:bg-surface-hover group-focus:bg-surface-focus">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>
                            </span>
                            <span class="grow">
                              <span class="block text-sm text-foreground">
                                Location-based security
                              </span>
                            </span>
                          </span>
                        </span>

Open related order card template

Stacked preference list combines category icons, supporting text, and individual newsletter switches.

<div class="pb-8 mb-8 border-b border-line-2 last:pb-0 last:mb-0 last:border-b-0">
                      <h2 class="mb-4 font-medium text-foreground">
                        Categories
                      </h2>

<div class="grow">
                            <div class="flex flex-col">
                              <span class="block text-sm text-foreground">
                                Men
                              </span>
                              <p class="text-[13px] text-muted-foreground-1">
                                Stay updated with the latest in men's fashion, from casual wear to sharp, tailored looks.
                              </p>
                            </div>
                          </div>

<div class="flex items-center gap-4 sm:gap-6">
                          <svg class="shrink-0 size-6 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 1a4 4 0 1 0 0 8 4 4 0 0 0 0-8M3 5a5 5 0 1 1 5.5 4.975V12h2a.5.5 0 0 1 0 1h-2v2.5a.5.5 0 0 1-1 0V13h-2a.5.5 0 0 1 0-1h2V9.975A5 5 0 0 1 3 5"/></svg>

<div class="grow">
                            <div class="flex flex-col">
                              <span class="block text-sm text-foreground">
                                Women
                              </span>
                              <p class="text-[13px] text-muted-foreground-1">
                                Discover the newest trends in women's fashion, including chic outfits and elegant accessories.
                              </p>
                            </div>
                          </div>

<div class="flex items-center gap-4 sm:gap-6">
                          <svg class="shrink-0 size-6 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12h.01"/><path d="M15 12h.01"/><path d="M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5"/><path d="M19 6.3a9 9 0 0 1 1.8 3.9 2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1"/></svg>

<div class="grow">
                            <div class="flex flex-col">
                              <span class="block text-sm text-foreground">
                                Kids
                              </span>
                              <p class="text-[13px] text-muted-foreground-1">
                                Find adorable and stylish clothing for kids, with updates on the latest arrivals and seasonal collections.
                              </p>
                            </div>
                          </div>

Settings List with Switches and Sorting Pro

Rounded settings list mixes toggle rows with one schedulable row that adds paired time selects.

<ul class="flex flex-col bg-layer border border-layer-line rounded-xl -space-y-px">
  
  <li class="p-3 border-t border-layer-line first:border-t-0">
    <div class="flex gap-x-3">
      <span class="mt-0.5 shrink-0 flex flex-col justify-center items-center size-6.5 bg-red-500 text-foreground-inverse rounded-full">
        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M5.164 14H15c-1.5-1-2-5.902-2-7 0-.264-.02-.523-.06-.776L5.164 14zm6.288-10.617A4.988 4.988 0 0 0 8.995 2.1a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 7c0 .898-.335 4.342-1.278 6.113l9.73-9.73zM10 15a2 2 0 1 1-4 0h4zm-9.375.625a.53.53 0 0 0 .75.75l14.75-14.75a.53.53 0 0 0-.75-.75L.625 15.625z"/>
        </svg>
      </span>
      <div class="grow">
        <div class="flex justify-between items-center mb-1">
          <p class="text-sm font-semibold text-foreground">
            Offline
          </p>
          <label for="hs-pro-dsmofs" class="relative inline-block w-11 h-6 cursor-pointer">
            <input type="checkbox" id="hs-pro-dsmofs" class="peer sr-only" checked>
            <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
            <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
          </label>
        </div>
        <p class="text-xs text-muted-foreground-1">
          Mute notifications and unassign new messages
        </p>
      </div>
    </div>
  </li>

<li class="p-3 border-t border-layer-line first:border-t-0">
    <div class="flex gap-x-3">
      <span class="mt-0.5 shrink-0 flex flex-col justify-center items-center size-6.5 bg-yellow-500 text-foreground-inverse rounded-full">
        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
        </svg>
      </span>
      <div class="grow">
        <div class="flex justify-between items-center mb-1">
          <p class="text-sm font-semibold text-foreground">
            Do not disturb
          </p>
          <label for="hs-pro-dsmdnds" class="relative inline-block w-11 h-6 cursor-pointer">
            <input type="checkbox" id="hs-pro-dsmdnds" class="peer sr-only">
            <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
            <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
          </label>
        </div>
        <p class="text-xs text-muted-foreground-1">
          Mute notifications
        </p>
      </div>
    </div>
  </li>

<li class="p-3 border-t border-layer-line first:border-t-0">
    <div class="flex gap-x-3">
      <span class="mt-0.5 shrink-0 flex flex-col justify-center items-center size-6.5 bg-yellow-500 text-foreground-inverse rounded-full">
        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
        </svg>
      </span>
      <div class="grow">
        <div class="flex justify-between items-center mb-1">
          <p class="text-sm font-semibold text-foreground">
            Schedule
          </p>
          <label for="hs-pro-dsmschs" class="relative inline-block w-11 h-6 cursor-pointer">
            <input type="checkbox" id="hs-pro-dsmschs" class="peer sr-only">
            <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
            <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
          </label>
        </div>

<div class="mt-3 sm:mt-1 flex flex-wrap items-center gap-2">
          
          <div class="relative">
            <select id="hs-pro-select-time1" data-hs-select='{
                "placeholder": "Select option...",
                "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-4 pe-7 flex text-nowrap w-full cursor-pointer bg-surface rounded-lg text-start text-sm text-surface-foreground focus:outline-hidden focus:bg-surface-focus before:absolute before:inset-0 before:z-1",
                "dropdownClasses": "mt-2 z-50 w-full min-w-36 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                "optionClasses": "hs-selected:bg-select-item-active py-2 px-3 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>",
                "viewport": "#hs-modal-status-body"
              }' class="hidden">
              <option value="">Choose</option>
              <option>12:01 AM</option>
              <option>1:00 AM</option>
              <option>2:00 AM</option>
              <option>3:00 AM</option>
              <option>4:00 AM</option>
              <option>5:00 AM</option>
              <option>6:00 AM</option>
              <option>7:00 AM</option>
              <option>8:00 AM</option>
              <option selected>9:00 AM</option>
              <option >10:00 AM</option>
              <option>11:00 AM</option>
              <option>12:01 PM</option>
              <option>1:00 PM</option>
              <option>2:00 PM</option>
              <option>3:00 PM</option>
              <option>4:00 PM</option>
              <option>5:00 PM</option>
              <option>6:00 PM</option>
              <option>7:00 PM</option>
              <option>8:00 PM</option>
              <option>9:00 PM</option>
              <option>10:00 PM</option>
              <option>11:00 PM</option>
            </select>
          </div>

<span class="text-sm text-muted-foreground-1">to:</span>
          
          
          <div class="relative">
            <select id="hs-pro-select-time2" data-hs-select='{
                "placeholder": "Select option...",
                "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-4 pe-7 flex text-nowrap w-full cursor-pointer bg-surface rounded-lg text-start text-sm text-surface-foreground focus:outline-hidden focus:bg-surface-focus before:absolute before:inset-0 before:z-1",
                "dropdownClasses": "mt-2 z-50 w-full min-w-36 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                "optionClasses": "hs-selected:bg-select-item-active py-2 px-3 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>",
                "viewport": "#hs-modal-status-body"
              }' class="hidden">
              <option value="">Choose</option>
              <option>12:01 AM</option>
              <option>1:00 AM</option>
              <option>2:00 AM</option>
              <option>3:00 AM</option>
              <option>4:00 AM</option>
              <option>5:00 AM</option>
              <option>6:00 AM</option>
              <option>7:00 AM</option>
              <option>8:00 AM</option>
              <option >9:00 AM</option>
              <option selected>10:00 AM</option>
              <option>11:00 AM</option>
              <option>12:01 PM</option>
              <option>1:00 PM</option>
              <option>2:00 PM</option>
              <option>3:00 PM</option>
              <option>4:00 PM</option>
              <option>5:00 PM</option>
              <option>6:00 PM</option>
              <option>7:00 PM</option>
              <option>8:00 PM</option>
              <option>9:00 PM</option>
              <option>10:00 PM</option>
              <option>11:00 PM</option>
            </select>
          </div>
          
        </div>
        
      </div>
    </div>
  </li>
  
</ul>

Open related my profile template

Grid Preference Switches Pro

Two-column grid lays out switch rows with short labels and helper text for each preference.

<div class="grid sm:grid-cols-2 gap-y-6 sm:gap-y-0 sm:gap-x-10 md:gap-x-16">
  <div class="space-y-6">
    
    <div class="flex gap-x-4">
      <div class="mt-1">
        <label for="hs-pro-danpe1" class="relative inline-block w-11 h-6 cursor-pointer">
          <input type="checkbox" id="hs-pro-danpe1" class="peer sr-only" checked>
          <span class="absolute inset-0 bg-surface-1 rounded-md transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
          <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-sm shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
        </label>
      </div>
      <div class="flex flex-col">
        <span class="block text-sm font-medium text-foreground">
          Daily digest
        </span>
        <p class="text-sm text-muted-foreground-1">
          Personalized productivity stats plus your tasks due today. Sent every morning.
        </p>
      </div>
    </div>

<div class="flex gap-x-4">
      <div class="mt-1">
        <label for="hs-pro-danpe2" class="relative inline-block w-11 h-6 cursor-pointer">
          <input type="checkbox" id="hs-pro-danpe2" class="peer sr-only" checked>
          <span class="absolute inset-0 bg-surface-1 rounded-md transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
          <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-sm shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
        </label>
      </div>
      <div class="flex flex-col">
        <span class="block text-sm font-medium text-foreground">
          What’s new
        </span>
        <p class="text-sm text-muted-foreground-1">
          Exciting features and updates from the Preline team. Sent no more than once a month.
        </p>
      </div>
    </div>

<div class="flex gap-x-4">
      <div class="mt-1">
        <label for="hs-pro-danpe3" class="relative inline-block w-11 h-6 cursor-pointer">
          <input type="checkbox" id="hs-pro-danpe3" class="peer sr-only" checked>
          <span class="absolute inset-0 bg-surface-1 rounded-md transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
          <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-sm shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
        </label>
      </div>
      <div class="flex flex-col">
        <span class="block text-sm font-medium text-foreground">
          Tips and tricks
        </span>
        <p class="text-sm text-muted-foreground-1">
          Powerful productivity advice in your inbox. Sent once a month.
        </p>
      </div>
    </div>

<div class="flex gap-x-4">
      <div class="mt-1">
        <label for="hs-pro-danpe4" class="relative inline-block w-11 h-6 cursor-pointer">
          <input type="checkbox" id="hs-pro-danpe4" class="peer sr-only" checked>
          <span class="absolute inset-0 bg-surface-1 rounded-md transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
          <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-sm shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
        </label>
      </div>
      <div class="flex flex-col">
        <span class="block text-sm font-medium text-foreground">
          New login alert
        </span>
        <p class="text-sm text-muted-foreground-1">
          Get an email notification every time a new device is logged into your account. Recommended.
        </p>
      </div>
    </div>
    
  </div>

<div class="space-y-6">
    
    <div class="flex gap-x-4">
      <div class="mt-1">
        <label for="hs-pro-danpe5" class="relative inline-block w-11 h-6 cursor-pointer">
          <input type="checkbox" id="hs-pro-danpe5" class="peer sr-only" checked>
          <span class="absolute inset-0 bg-surface-1 rounded-md transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
          <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-sm shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
        </label>
      </div>
      <div class="flex flex-col">
        <span class="block text-sm font-medium text-foreground">
          New device login
        </span>
        <p class="text-sm text-muted-foreground-1">
          Notify me when there is a new login.
        </p>
      </div>
    </div>

<div class="flex gap-x-4">
      <div class="mt-1">
        <label for="hs-pro-danpe6" class="relative inline-block w-11 h-6 cursor-pointer">
          <input type="checkbox" id="hs-pro-danpe6" class="peer sr-only">
          <span class="absolute inset-0 bg-surface-1 rounded-md transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
          <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-sm shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
        </label>
      </div>
      <div class="flex flex-col">
        <span class="block text-sm font-medium text-foreground">
          Perks
        </span>
        <p class="text-sm text-muted-foreground-1">
          Special discounts, partner offers, invitations to events, and more
        </p>
      </div>
    </div>

<div class="flex gap-x-4">
      <div class="mt-1">
        <label for="hs-pro-danpe7" class="relative inline-block w-11 h-6 cursor-pointer">
          <input type="checkbox" id="hs-pro-danpe7" class="peer sr-only">
          <span class="absolute inset-0 bg-surface-1 rounded-md transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
          <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-sm shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
        </label>
      </div>
      <div class="flex flex-col">
        <span class="block text-sm font-medium text-foreground">
          Research & Feedback
        </span>
        <p class="text-sm text-muted-foreground-1">
          Invitiations to share feedback about the program and products.
        </p>
      </div>
    </div>
    
  </div>
  
</div>

Switches

Alert Notification Toggle Pro

Icon Preference Switch List Pro

Newsletter Preference Switches Pro

Settings List with Switches and Sorting Pro

Grid Preference Switches Pro