Tailwind CSS Checkbox & Preference Controls Blocks

All Blocks
Application UI
Forms
Checkbox & Preference Controls

Checkbox & Preference Controls

Checkbox and preference controls for toggles, to-do lists, range settings, timelines, and inline choices.

Locker Switches Pro

Transparent control cards pair device labels, status details, and end-aligned toggle switches.

<div class="p-4 relative flex flex-col justify-center gap-y-5 bg-inverse/10 border border-line-inverse/30 backdrop-blur-lg rounded-2xl">
                      
                      <div class="flex flex-col">
                        <div class="mb-2 text-center">
                          <h3 class="text-foreground-inverse">
                            Front Door Lock
                          </h3>
                        </div>

<div class="flex flex-col items-center">
                          <p class="text-foreground-inverse">
                            Locked
                          </p>

<p class="text-xs text-foreground-inverse/60">
                            100% Battery charge
                          </p>
                        </div>
                      </div>

Numeric Inputs with Switches Pro

Device control card combines a numeric stepper with two labeled preference switches.

<div class="p-4 pt-8 relative flex flex-col justify-center items-center gap-y-3 bg-inverse/10 border border-line-inverse/30 backdrop-blur-lg rounded-2xl">
                      
                      <div class="text-center">
                        <span class="mb-1 inline-flex shrink-0 justify-center items-center size-10 rounded-full bg-plain/10 text-foreground-inverse">
                          <svg class="shrink-0 size-6" 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="M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z"/></svg>
                        </span>

<h3 class="text-foreground-inverse">
                          Air Conditioner
                        </h3>
                        <p class="text-sm text-foreground-inverse/70">
                          Living room
                        </p>

<span class="peer-checked:hidden flex items-center justify-center bg-plain/10 border border-line-inverse/20 text-foreground-inverse size-9 rounded-full inset-shadow-sm shadow-sm">
                              <svg class="shrink-0 size-4.5" 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="M18.36 6.64A9 9 0 0 1 20.77 15"/><path d="M6.16 6.16a9 9 0 1 0 12.68 12.68"/><path d="M12 2v4"/><path d="m2 2 20 20"/></svg>
                            </span>

<div class="flex justify-center items-center gap-x-3" data-hs-input-number='{
                        "min": -10,
                        "max": 99
                      }'>
                        <button type="button" class="size-7 inline-flex justify-center items-center gap-x-2 border border-line-inverse/20 text-foreground-inverse rounded-full hover:bg-plain/10 focus:outline-hidden focus:bg-plain/10 disabled:opacity-50 disabled:pointer-events-none" tabindex="-1" aria-label="Decrease" data-hs-input-number-decrement >
                          <svg class="shrink-0 size-3.5" 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="M5 12h14"></path></svg>
                        </button>
                        <input class="p-0 w-18.5 bg-transparent border-0 text-5xl text-foreground-inverse text-center focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" style="-moz-appearance: textfield;" type="number" aria-roledescription="Number field" value="22" data-hs-input-number-input readonly>
                        <span class="text-4xl/5 text-foreground-inverse -ms-3 -mt-3">°</span>
                        <button type="button" class="size-7 inline-flex justify-center items-center gap-x-2 border border-line-inverse/20 text-foreground-inverse rounded-full hover:bg-plain/10 focus:outline-hidden focus:bg-plain/10 disabled:opacity-50 disabled:pointer-events-none" tabindex="-1" aria-label="Increase" data-hs-input-number-increment >
                          <svg class="shrink-0 size-3.5" 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="M5 12h14"></path><path d="M12 5v14"></path></svg>
                        </button>
                      </div>

<div class="relative w-full grid grid-cols-3 gap-3">
                        
                        <label for="hs-pro-shrtrac2" class="p-2 flex flex-col justify-center items-center sm:text-xs text-center bg-plain/10 border border-line-inverse/20 text-foreground-inverse cursor-pointer rounded-lg inset-shadow-sm shadow-sm has-checked:bg-primary has-checked:border-primary has-checked:inset-shadow-none">
                          <input type="radio" id="hs-pro-shrtrac2" class="peer hidden" name="hs-pro-shrtrac" >
                          <svg class="shrink-0 size-4 mx-auto" 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="M10 21v-1"/><path d="M10 4V3"/><path d="M10 9a3 3 0 0 0 0 6"/><path d="m14 20 1.25-2.5L18 18"/><path d="m14 4 1.25 2.5L18 6"/><path d="m17 21-3-6 1.5-3H22"/><path d="m17 3-3 6 1.5 3"/><path d="M2 12h1"/><path d="m20 10-1.5 2 1.5 2"/><path d="m3.64 18.36.7-.7"/><path d="m4.34 6.34-.7-.7"/></svg><span class="block mt-1">Auto</span>
                        </label>

<label for="hs-pro-shrtrac3" class="p-2 flex flex-col justify-center items-center sm:text-xs text-center bg-plain/10 border border-line-inverse/20 text-foreground-inverse cursor-pointer rounded-lg inset-shadow-sm shadow-sm has-checked:bg-primary has-checked:border-primary has-checked:inset-shadow-none">
                          <input type="radio" id="hs-pro-shrtrac3" class="peer hidden" name="hs-pro-shrtrac" >
                          <svg class="shrink-0 size-4 mx-auto" 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"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg><span class="block mt-1">Hot</span>
                        </label>

<label for="hs-pro-shrtrac4" class="p-2 flex flex-col justify-center items-center sm:text-xs text-center bg-plain/10 border border-line-inverse/20 text-foreground-inverse cursor-pointer rounded-lg inset-shadow-sm shadow-sm has-checked:bg-primary has-checked:border-primary has-checked:inset-shadow-none">
                          <input type="radio" id="hs-pro-shrtrac4" class="peer hidden" name="hs-pro-shrtrac" checked>
                          <svg class="shrink-0 size-4 mx-auto" 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="m10 20-1.25-2.5L6 18"/><path d="M10 4 8.75 6.5 6 6"/><path d="m14 20 1.25-2.5L18 18"/><path d="m14 4 1.25 2.5L18 6"/><path d="m17 21-3-6h-4"/><path d="m17 3-3 6 1.5 3"/><path d="M2 12h6.5L10 9"/><path d="m20 10-1.5 2 1.5 2"/><path d="M22 12h-6.5L14 15"/><path d="m4 10 1.5 2L4 14"/><path d="m7 21 3-6-1.5-3"/><path d="m7 3 3 6h4"/></svg><span class="block mt-1">Cold</span>
                        </label>
                        
                      </div>
                      
                    </div>

Range Sliders with Toggles Pro

Stacked device rows combine range sliders, current values, and toggle switches in one panel.

<!DOCTYPE html>
                    <html lang="en" dir="ltr" class="relative min-h-full h-full">
                      <head>
                        <meta charset="utf-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                        <title>Preline UI</title>
                        <link rel="shortcut icon" href="../../../favicon.ico">
                        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                        <link rel="stylesheet" href="../../../assets/css/main.min.css">
                      </head>
                      <body class="py-10 xl:py-0 bg-[url(https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)] bg-no-repeat bg-cover bg-center before:absolute before:inset-0 before:bg-inverse/20 before:rounded-xl xl:mt-12 w-full max-w-xl mx-auto">
                    <div class="p-1 h-full flex flex-col bg-inverse/10 border border-line-inverse/30 backdrop-blur-lg rounded-2xl">
                      
                      <div class="p-4">
                        <h2 class="font-medium text-foreground-inverse">
                          Favorite Smart Lamps
                        </h2>
                        <p class="text-sm text-foreground-inverse/70">
                          3 devices
                        </p>
                      </div>

<div class="px-4 mb-10 text-center">
                        
                        <div data-hs-carousel='{
                          "loadingClasses": "opacity-0",
                          "isInfiniteLoop": "true"
                        }' class="relative size-full">
                          <div class="hs-carousel relative overflow-hidden w-full h-52">
                            <div class="hs-carousel-body absolute top-0 bottom-0 inset-s-0 flex flex-nowrap transition-transform duration-700 opacity-0">
                              <div class="hs-carousel-slide">
                                
                                <div class="hs-range-slider-wrapper w-full text-center overflow-hidden">
                                  <div class="mb-5 flex justify-center items-center">
                                    <span class="flex shrink-0 justify-center items-center size-12 border border-line-inverse/20 rounded-full">
                                      <svg class="shrink-0 size-6 text-foreground-inverse" 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="m14 5-3 3 2 7 8-8-7-2Z"/><path d="m14 5-3 3-3-3 3-3 3 3Z"/><path d="M9.5 6.5 4 12l3 6"/><path d="M3 22v-2c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2H3Z"/></svg>
                                    </span>
                                  </div>

<p class="text-sm text-foreground-inverse">
                                      Desk Lights 1
                                    </p>
                                  </div>

<div  class="" data-hs-range-slider='{
                                    "start": 50,
                                    "connect": "lower",
                                    "range": {
                                      "min": 0,
                                      "max": 100
                                    },
                                    "formatter": "integer",
                                    "cssClasses": {
                                      "target": "relative h-8 bg-plain/20 mx-4",
                                      "base": "size-full relative z-1 top-0 inset-e-0 before:absolute before:-inset-s-4 before:top-0 before:h-8 before:w-4 before:rounded-s-full before:bg-plain after:absolute after:-inset-e-4 after:top-0 after:h-8 after:w-4 after:rounded-e-full after:bg-plain/20",
                                      "origin": "absolute top-0 inset-e-0 size-full origin-top-left",
                                      "handle": "absolute top-1/2 inset-e-0 flex justify-center items-center size-8 bg-plain rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                                      "connects": "relative z-0 size-full overflow-hidden",
                                      "connect": "absolute top-0 inset-e-0 z-1 size-full bg-plain origin-top-left",
                                      "touchArea": "absolute -inset-1"
                                    },
                                    "icons": {
                                      "handle": "<svg class=\"shrink-0 size-4 text-black\" 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=\"m9 7-5 5 5 5\"/><path d=\"m15 7 5 5-5 5\"/></svg>"
                                    }
                                  }'></div>
                                  
                                </div>
                                
                              </div>

<p class="text-sm text-foreground-inverse">
                                      Desk Lights 2
                                    </p>
                                  </div>

<div  class="" data-hs-range-slider='{
                                    "start": 25,
                                    "connect": "lower",
                                    "range": {
                                      "min": 0,
                                      "max": 100
                                    },
                                    "formatter": "integer",
                                    "cssClasses": {
                                      "target": "relative h-8 bg-plain/20 mx-4",
                                      "base": "size-full relative z-1 top-0 inset-e-0 before:absolute before:-inset-s-4 before:top-0 before:h-8 before:w-4 before:rounded-s-full before:bg-plain after:absolute after:-inset-e-4 after:top-0 after:h-8 after:w-4 after:rounded-e-full after:bg-plain/20",
                                      "origin": "absolute top-0 inset-e-0 size-full origin-top-left",
                                      "handle": "absolute top-1/2 inset-e-0 flex justify-center items-center size-8 bg-plain rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                                      "connects": "relative z-0 size-full overflow-hidden",
                                      "connect": "absolute top-0 inset-e-0 z-1 size-full bg-plain origin-top-left",
                                      "touchArea": "absolute -inset-1"
                                    },
                                    "icons": {
                                      "handle": "<svg class=\"shrink-0 size-4 text-black\" 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=\"m9 7-5 5 5 5\"/><path d=\"m15 7 5 5-5 5\"/></svg>"
                                    }
                                  }'></div>
                                  
                                </div>
                                
                              </div>

<p class="text-sm text-foreground-inverse">
                                      Back Door Lights 1
                                    </p>
                                  </div>

<div  class="" data-hs-range-slider='{
                                    "start": 100,
                                    "connect": "lower",
                                    "range": {
                                      "min": 0,
                                      "max": 100
                                    },
                                    "formatter": "integer",
                                    "cssClasses": {
                                      "target": "relative h-8 bg-plain/20 mx-4",
                                      "base": "size-full relative z-1 top-0 inset-e-0 before:absolute before:-inset-s-4 before:top-0 before:h-8 before:w-4 before:rounded-s-full before:bg-plain after:absolute after:-inset-e-4 after:top-0 after:h-8 after:w-4 after:rounded-e-full after:bg-plain/20",
                                      "origin": "absolute top-0 inset-e-0 size-full origin-top-left",
                                      "handle": "absolute top-1/2 inset-e-0 flex justify-center items-center size-8 bg-plain rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                                      "connects": "relative z-0 size-full overflow-hidden",
                                      "connect": "absolute top-0 inset-e-0 z-1 size-full bg-plain origin-top-left",
                                      "touchArea": "absolute -inset-1"
                                    },
                                    "icons": {
                                      "handle": "<svg class=\"shrink-0 size-4 text-black\" 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=\"m9 7-5 5 5 5\"/><path d=\"m15 7 5 5-5 5\"/></svg>"
                                    }
                                  }'></div>
                                  
                                </div>
                                
                              </div>
                            </div>
                          </div>

<button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default absolute top-1/2 inset-s-2 size-8 inline-flex shrink-0 justify-center items-center gap-x-2 border border-line-inverse/20 text-foreground-inverse rounded-full inset-shadow-sm shadow-sm hover:bg-plain/20 focus:outline-hidden focus:bg-plain/20 -translate-y-1/2">
                            <span class="text-2xl" aria-hidden="true">
                              <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="m15 18-6-6 6-6"></path></svg>
                            </span>
                            <span class="sr-only">Previous</span>
                          </button>

<div class="border-t border-line-inverse/10">
                        
                        <div class="p-4">
                          <h2 class="font-medium text-foreground-inverse">
                            All Smart Lamps
                          </h2>
                          <p class="text-sm text-foreground-inverse/70">
                            11 devices
                          </p>
                        </div>

<div class="grow">
                                  <p class="text-sm text-foreground-inverse">
                                    Kitchen Lights 1
                                  </p>
                                  <p class="text-xs text-foreground-inverse/60">
                                    <span class="hs-range-slider-current-value">100</span>%
                                  </p>
                                </div>
                              </div>

<span class="peer-checked:hidden flex items-center justify-center bg-plain/10 border border-line-inverse/20 text-foreground-inverse size-9 rounded-full inset-shadow-sm shadow-sm">
                                    <svg class="shrink-0 size-4.5" 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="M18.36 6.64A9 9 0 0 1 20.77 15"/><path d="M6.16 6.16a9 9 0 1 0 12.68 12.68"/><path d="M12 2v4"/><path d="m2 2 20 20"/></svg>
                                  </span>

<div class="hs-range-slider-wrapper relative flex flex-col sm:flex-row sm:items-center gap-2">
                              <div class="min-w-48 flex items-center gap-x-2.5">
                                <span class="flex shrink-0 justify-center items-center size-8.5 border border-line-inverse/20 rounded-lg">
                                  <svg class="shrink-0 size-4 text-foreground-inverse" 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="M12 2v5"/><path d="M6 7h12l4 9H2l4-9Z"/><path d="M9.17 16a3 3 0 1 0 5.66 0"/></svg>
                                </span>

<div class="grow">
                                  <p class="text-sm text-foreground-inverse">
                                    Kitchen Lights 2
                                  </p>
                                  <p class="text-xs text-foreground-inverse/60">
                                    <span class="hs-range-slider-current-value">100</span>%
                                  </p>
                                </div>
                              </div>

<span class="peer-checked:hidden flex items-center justify-center bg-plain/10 border border-line-inverse/20 text-foreground-inverse size-9 rounded-full inset-shadow-sm shadow-sm">
                                    <svg class="shrink-0 size-4.5" 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="M18.36 6.64A9 9 0 0 1 20.77 15"/><path d="M6.16 6.16a9 9 0 1 0 12.68 12.68"/><path d="M12 2v4"/><path d="m2 2 20 20"/></svg>
                                  </span>

<div class="grow">
                                  <p class="text-sm text-foreground-inverse">
                                    Back Door Lights 1
                                  </p>
                                  <p class="text-xs text-foreground-inverse/60">
                                    <span class="hs-range-slider-current-value">100</span>%
                                  </p>
                                </div>
                              </div>

<span class="peer-checked:hidden flex items-center justify-center bg-plain/10 border border-line-inverse/20 text-foreground-inverse size-9 rounded-full inset-shadow-sm shadow-sm">
                                    <svg class="shrink-0 size-4.5" 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="M18.36 6.64A9 9 0 0 1 20.77 15"/><path d="M6.16 6.16a9 9 0 1 0 12.68 12.68"/><path d="M12 2v4"/><path d="m2 2 20 20"/></svg>
                                  </span>

<div class="grow">
                                  <p class="text-sm text-foreground-inverse">
                                    Back Door Lights 2
                                  </p>
                                  <p class="text-xs text-foreground-inverse/60">
                                    <span class="hs-range-slider-current-value">0</span>%
                                  </p>
                                </div>
                              </div>

<span class="peer-checked:hidden flex items-center justify-center bg-plain/10 border border-line-inverse/20 text-foreground-inverse size-9 rounded-full inset-shadow-sm shadow-sm">
                                    <svg class="shrink-0 size-4.5" 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="M18.36 6.64A9 9 0 0 1 20.77 15"/><path d="M6.16 6.16a9 9 0 1 0 12.68 12.68"/><path d="M12 2v4"/><path d="m2 2 20 20"/></svg>
                                  </span>

<div class="grow">
                                  <p class="text-sm text-foreground-inverse">
                                    Back Door Lights 3
                                  </p>
                                  <p class="text-xs text-foreground-inverse/60">
                                    <span class="hs-range-slider-current-value">0</span>%
                                  </p>
                                </div>
                              </div>

<span class="peer-checked:hidden flex items-center justify-center bg-plain/10 border border-line-inverse/20 text-foreground-inverse size-9 rounded-full inset-shadow-sm shadow-sm">
                                    <svg class="shrink-0 size-4.5" 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="M18.36 6.64A9 9 0 0 1 20.77 15"/><path d="M6.16 6.16a9 9 0 1 0 12.68 12.68"/><path d="M12 2v4"/><path d="m2 2 20 20"/></svg>
                                  </span>

<div class="grow">
                                  <p class="text-sm text-foreground-inverse">
                                    Dining Lights 1
                                  </p>
                                  <p class="text-xs text-foreground-inverse/60">
                                    <span class="hs-range-slider-current-value">20</span>%
                                  </p>
                                </div>
                              </div>

<span class="peer-checked:hidden flex items-center justify-center bg-plain/10 border border-line-inverse/20 text-foreground-inverse size-9 rounded-full inset-shadow-sm shadow-sm">
                                    <svg class="shrink-0 size-4.5" 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="M18.36 6.64A9 9 0 0 1 20.77 15"/><path d="M6.16 6.16a9 9 0 1 0 12.68 12.68"/><path d="M12 2v4"/><path d="m2 2 20 20"/></svg>
                                  </span>

<div class="grow">
                                  <p class="text-sm text-foreground-inverse">
                                    Dining Lights 2
                                  </p>
                                  <p class="text-xs text-foreground-inverse/60">
                                    <span class="hs-range-slider-current-value">0</span>%
                                  </p>
                                </div>
                              </div>

<span class="peer-checked:hidden flex items-center justify-center bg-plain/10 border border-line-inverse/20 text-foreground-inverse size-9 rounded-full inset-shadow-sm shadow-sm">
                                    <svg class="shrink-0 size-4.5" 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="M18.36 6.64A9 9 0 0 1 20.77 15"/><path d="M6.16 6.16a9 9 0 1 0 12.68 12.68"/><path d="M12 2v4"/><path d="m2 2 20 20"/></svg>
                                  </span>

<div class="grow">
                                  <p class="text-sm text-foreground-inverse">
                                    Hall Lights 1
                                  </p>
                                  <p class="text-xs text-foreground-inverse/60">
                                    <span class="hs-range-slider-current-value">50</span>%
                                  </p>
                                </div>
                              </div>

<span class="peer-checked:hidden flex items-center justify-center bg-plain/10 border border-line-inverse/20 text-foreground-inverse size-9 rounded-full inset-shadow-sm shadow-sm">
                                    <svg class="shrink-0 size-4.5" 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="M18.36 6.64A9 9 0 0 1 20.77 15"/><path d="M6.16 6.16a9 9 0 1 0 12.68 12.68"/><path d="M12 2v4"/><path d="m2 2 20 20"/></svg>
                                  </span>

<div class="grow">
                                  <p class="text-sm text-foreground-inverse">
                                    Hall Lights 2
                                  </p>
                                  <p class="text-xs text-foreground-inverse/60">
                                    <span class="hs-range-slider-current-value">70</span>%
                                  </p>
                                </div>
                              </div>

<span class="peer-checked:hidden flex items-center justify-center bg-plain/10 border border-line-inverse/20 text-foreground-inverse size-9 rounded-full inset-shadow-sm shadow-sm">
                                    <svg class="shrink-0 size-4.5" 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="M18.36 6.64A9 9 0 0 1 20.77 15"/><path d="M6.16 6.16a9 9 0 1 0 12.68 12.68"/><path d="M12 2v4"/><path d="m2 2 20 20"/></svg>
                                  </span>

<div class="hs-range-slider-wrapper relative flex flex-col sm:flex-row sm:items-center gap-2">
                              <div class="min-w-48 flex items-center gap-x-2.5">
                                <span class="flex shrink-0 justify-center items-center size-8.5 border border-line-inverse/20 rounded-lg">
                                  <svg class="shrink-0 size-4 text-foreground-inverse" 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="m14 5-3 3 2 7 8-8-7-2Z"/><path d="m14 5-3 3-3-3 3-3 3 3Z"/><path d="M9.5 6.5 4 12l3 6"/><path d="M3 22v-2c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2H3Z"/></svg>
                                </span>

<div class="grow">
                                  <p class="text-sm text-foreground-inverse">
                                    Desk Lights 1
                                  </p>
                                  <p class="text-xs text-foreground-inverse/60">
                                    <span class="hs-range-slider-current-value">50</span>%
                                  </p>
                                </div>
                              </div>

<span class="peer-checked:hidden flex items-center justify-center bg-plain/10 border border-line-inverse/20 text-foreground-inverse size-9 rounded-full inset-shadow-sm shadow-sm">
                                    <svg class="shrink-0 size-4.5" 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="M18.36 6.64A9 9 0 0 1 20.77 15"/><path d="M6.16 6.16a9 9 0 1 0 12.68 12.68"/><path d="M12 2v4"/><path d="m2 2 20 20"/></svg>
                                  </span>

<div class="hs-range-slider-wrapper relative flex flex-col sm:flex-row sm:items-center gap-2">
                              <div class="min-w-48 flex items-center gap-x-2.5">
                                <span class="flex shrink-0 justify-center items-center size-8.5 border border-line-inverse/20 rounded-lg">
                                  <svg class="shrink-0 size-4 text-foreground-inverse" 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="m14 5-3 3 2 7 8-8-7-2Z"/><path d="m14 5-3 3-3-3 3-3 3 3Z"/><path d="M9.5 6.5 4 12l3 6"/><path d="M3 22v-2c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2H3Z"/></svg>
                                </span>

<div class="grow">
                                  <p class="text-sm text-foreground-inverse">
                                    Desk Lights 2
                                  </p>
                                  <p class="text-xs text-foreground-inverse/60">
                                    <span class="hs-range-slider-current-value">25</span>%
                                  </p>
                                </div>
                              </div>

<span class="peer-checked:hidden flex items-center justify-center bg-plain/10 border border-line-inverse/20 text-foreground-inverse size-9 rounded-full inset-shadow-sm shadow-sm">
                                    <svg class="shrink-0 size-4.5" 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="M18.36 6.64A9 9 0 0 1 20.77 15"/><path d="M6.16 6.16a9 9 0 1 0 12.68 12.68"/><path d="M12 2v4"/><path d="m2 2 20 20"/></svg>
                                  </span>

<span class="hidden peer-checked:flex justify-center items-center border border-line-inverse/20 text-foreground-inverse size-9 rounded-full peer-checked:bg-primary peer-checked:border-primary">
                                    <svg class="shrink-0 size-4.5" 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="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>
                                  </span>
                                </label>
                              </div>
                            </div>
                            
                          </div>
                          
                        </div>
                      </div>
                    </div>
                    
                        <script src="../../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                      </body>
                    </html>

<div class="p-1 h-full flex flex-col bg-inverse/10 border border-line-inverse/30 backdrop-blur-lg rounded-2xl">
                      
                      <div class="p-4">
                        <h2 class="font-medium text-foreground-inverse">
                          Favorite Smart Lamps
                        </h2>
                        <p class="text-sm text-foreground-inverse/70">
                          3 devices
                        </p>
                      </div>