Tailwind CSS Filter Drawers Blocks

All Blocks
Ecommerce
Filter Drawers

Filter Drawers

Ecommerce filter drawers for storefront product refinement, admin product filtering, and overlay-based browsing.

Storefront Filter Drawer with Price Slider Pro

Right-side storefront drawer stacks applied filter tags, grouped option cards, a price range slider, and footer actions for clearing or applying results.

<div id="hs-pro-shflo" class="hs-overlay hs-overlay-open:translate-x-0
translate-x-full transition-all duration-300 transform
size-full sm:w-100
hidden
fixed top-0 inset-e-0 z-80
flex flex-col
bg-overlay border-s border-overlay-line" role="dialog" tabindex="-1" aria-labelledby="hs-pro-shflo-label">
  
  <div class="py-3 px-6 flex justify-between items-center border-b border-overlay-divider">
    <h2 id="hs-pro-shflo-label" class="font-medium text-foreground">
      Filter
    </h2>
    <button type="button" class="py-1.5 px-2 inline-flex justify-center items-center gap-x-1 rounded-full bg-layer border border-layer-line text-xs text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Close" data-hs-overlay="#hs-pro-shflo">
      <span class="hidden lg:block">Esc</span>
      <span class="block lg:hidden">Close</span>
      <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
    </button>
  </div>

<div class="bg-surface h-full overflow-y-auto overflow-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
    <div class="p-2 space-y-2">
      
      <div class="p-4 bg-layer rounded-lg shadow-2xs">
        <div class="mb-3">
          <span class="font-medium text-sm text-foreground">Applied filters</span>
        </div>
        
        
        <span id="hs-pro-shfdaf1" class="hs-removing:opacity-0 transition duration-300 p-1 ps-2 inline-flex items-center gap-1.5 bg-surface text-surface-foreground text-sm rounded-md">
          Women
          <button type="button" class="inline-flex shrink-0 justify-center items-center size-5 rounded-md text-muted-foreground-2 hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus text-sm" data-hs-remove-element="#hs-pro-shfdaf1">
            <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="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
          </button>
        </span>

<span id="hs-pro-shfdaf2" class="hs-removing:opacity-0 transition duration-300 p-1 ps-2 inline-flex items-center gap-1.5 bg-surface text-surface-foreground text-sm rounded-md">
          Clothing
          <button type="button" class="inline-flex shrink-0 justify-center items-center size-5 rounded-md text-muted-foreground-2 hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus text-sm" data-hs-remove-element="#hs-pro-shfdaf2">
            <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="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
          </button>
        </span>
        
      </div>

<div class="p-4 bg-layer rounded-lg shadow-2xs">
        <div class="mb-3">
          <span class="font-medium text-sm text-foreground">Category</span>
        </div>
          
        
        <div class="space-y-0.5">
          
          <div class="flex items-center">
            <label for="hs-pro-shfloc-shirts" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-shirts">
              <span class="ms-2 text-foreground">Shirts</span>
              <span class="ms-auto text-xs text-muted-foreground-1">(47)</span>
            </label>
          </div>

<div class="flex items-center">
            <label for="hs-pro-shfloc-tshirts" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-tshirts">
              <span class="ms-2 text-foreground">T-shirts</span>
              <span class="ms-auto text-xs text-muted-foreground-1">(89)</span>
            </label>
          </div>

<div class="flex items-center">
            <label for="hs-pro-shfloc-polos" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-polos">
              <span class="ms-2 text-foreground">Polos</span>
              <span class="ms-auto text-xs text-muted-foreground-1">(35)</span>
            </label>
          </div>

<div class="flex items-center">
            <label for="hs-pro-shfloc-trousers" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-trousers">
              <span class="ms-2 text-foreground">Trousers</span>
              <span class="ms-auto text-xs text-muted-foreground-1">(30)</span>
            </label>
          </div>

<div class="flex items-center">
            <label for="hs-pro-shfloc-jeans" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-jeans">
              <span class="ms-2 text-foreground">Jeans</span>
              <span class="ms-auto text-xs text-muted-foreground-1">(21)</span>
            </label>
          </div>

<div class="flex items-center">
            <label for="hs-pro-shfloc-shorts" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-shorts">
              <span class="ms-2 text-foreground">Shorts</span>
              <span class="ms-auto text-xs text-muted-foreground-1">(5)</span>
            </label>
          </div>
          
  
          
          <div class="flex items-center">
            <label for="hs-pro-shfloc-jackets" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-jackets">
              <span class="ms-2 text-foreground">Jackets</span>
              <span class="ms-auto text-xs text-muted-foreground-1">(15)</span>
            </label>
          </div>
          
        </div>

<div id="hs-pro-shfcc-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-pro-shfcc" role="region">
          <div class="space-y-0.5">
            
            <div class="flex items-center">
              <label for="hs-pro-shfloc-sweaters" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-sweaters">
                <span class="ms-2 text-foreground">Sweaters</span>
                <span class="ms-auto text-xs text-muted-foreground-1">(44)</span>
              </label>
            </div>

<div class="flex items-center">
              <label for="hs-pro-shfloc-blazers" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-blazers">
                <span class="ms-2 text-foreground">Blazers</span>
                <span class="ms-auto text-xs text-muted-foreground-1">(1)</span>
              </label>
            </div>
            
          </div>
        </div>

<div class="p-4 bg-layer rounded-lg shadow-2xs">
        <div class="mb-3">
          <span class="font-medium text-sm text-foreground">Size</span>
        </div>
        
        
        <div class="mx-px grid grid-cols-3 gap-2">
          
          <label for="hs-pro-shfdsrOneSize" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsrOneSize" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              One size
            </span>
          </label>

<label for="hs-pro-shfdsr2XS" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr2XS" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              2XS
            </span>
          </label>

<label for="hs-pro-shfdsrXS" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsrXS" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              XS
            </span>
          </label>

<label for="hs-pro-shfdsrS" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsrS" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              S
            </span>
          </label>

<label for="hs-pro-shfdsrM" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsrM" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              M
            </span>
          </label>

<label for="hs-pro-shfdsrL" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsrL" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              L
            </span>
          </label>

<label for="hs-pro-shfdsrXL" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsrXL" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              XL
            </span>
          </label>

<label for="hs-pro-shfdsr2XL" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr2XL" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              2XL
            </span>
          </label>

<label for="hs-pro-shfdsr3XL" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr3XL" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              3XL
            </span>
          </label>

<label for="hs-pro-shfdsr4XL" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr4XL" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              4XL
            </span>
          </label>

<label for="hs-pro-shfdsr36" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr36" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              36
            </span>
          </label>

<label for="hs-pro-shfdsr38" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr38" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              38
            </span>
          </label>

<label for="hs-pro-shfdsr39" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr39" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              39
            </span>
          </label>

<label for="hs-pro-shfdsr40" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr40" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              40
            </span>
          </label>

<label for="hs-pro-shfdsr41" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr41" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              41
            </span>
          </label>

<label for="hs-pro-shfdsr42" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr42" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              42
            </span>
          </label>

<label for="hs-pro-shfdsr43" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr43" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              43
            </span>
          </label>

<label for="hs-pro-shfdsr44" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr44" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              44
            </span>
          </label>

<label for="hs-pro-shfdsr45" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr45" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              45
            </span>
          </label>

<label for="hs-pro-shfdsr46" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr46" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              46
            </span>
          </label>

<label for="hs-pro-shfdsr48" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr48" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              48
            </span>
          </label>

<label for="hs-pro-shfdsr50" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr50" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              50
            </span>
          </label>

<label for="hs-pro-shfdsr52" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr52" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              52
            </span>
          </label>

<label for="hs-pro-shfdsr54" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr54" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              54
            </span>
          </label>

<label for="hs-pro-shfdsr56" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr56" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              56
            </span>
          </label>

<label for="hs-pro-shfdsr58" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr58" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              58
            </span>
          </label>

<label for="hs-pro-shfdsr60" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
          has-checked:text-primary-checked
          has-checked:border-primary-checked
          has-checked:ring-1
          has-checked:ring-primary-checked
          has-disabled:pointer-events-none
          has-disabled:opacity-70
          has-disabled:text-line-2
          has-disabled:after:absolute
          has-disabled:after:inset-0
          has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
            <input type="checkbox" id="hs-pro-shfdsr60" class="hidden" name="hs-pro-shfdsr" >
            <span class="block">
              60
            </span>
          </label>
          
        </div>
        
      </div>

<div class="p-4 bg-layer rounded-lg shadow-2xs">
        <div class="mb-3">
          <span class="font-medium text-sm text-foreground">Color</span>
        </div>
        
        
        <div class="space-y-0.5">
          
          <label for="hs-pro-shflocss-black" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
            <input type="checkbox" class="shrink-0 size-4.5 bg-inverse border-black rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-black disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shflocss-black">
            <span class="ms-2 text-foreground">Black</span>
            <span class="ms-auto text-xs text-muted-foreground-1">(70)</span>
          </label>

<label for="hs-pro-shfloc-white" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
            <input type="checkbox" class="shrink-0 size-4.5 bg-plain border-line-3 rounded-sm focus:ring-0 focus:ring-offset-0 focus:checked:border-line-3 checked:text-foreground-inverse checked:border-line-3 checked:bg-none disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-white">
            <svg class="shrink-0 size-4 -ms-5 opacity-0 group-has-checked:opacity-100 fill-black" viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>
            <span class="ms-2 text-foreground">White</span>
            <span class="ms-auto text-xs text-muted-foreground-1">(127)</span>
          </label>

<label for="hs-pro-shfloc-gray" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
            <input type="checkbox" class="shrink-0 size-4.5 bg-surface-2 border-line-3 rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-line-3 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-gray">
            <span class="ms-2 text-foreground">Gray</span>
            <span class="ms-auto text-xs text-muted-foreground-1">(63)</span>
          </label>

<label for="hs-pro-shfloc-red" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
            <input type="checkbox" class="shrink-0 size-4.5 bg-red-500 border-red-500 rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-red-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-red">
            <span class="ms-2 text-foreground">Red</span>
            <span class="ms-auto text-xs text-muted-foreground-1">(32)</span>
          </label>

<label for="hs-pro-shfloc-orange" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
            <input type="checkbox" class="shrink-0 size-4.5 bg-orange-500 border-orange-500 rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-orange-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-orange">
            <span class="ms-2 text-foreground">Orange</span>
            <span class="ms-auto text-xs text-muted-foreground-1">(25)</span>
          </label>

<label for="hs-pro-shfloc-yellow" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
            <input type="checkbox" class="shrink-0 size-4.5 bg-yellow-500 border-yellow-500 rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-yellow-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-yellow">
            <span class="ms-2 text-foreground">Yellow</span>
            <span class="ms-auto text-xs text-muted-foreground-1">(15)</span>
          </label>

<label for="hs-pro-shfloc-green" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
            <input type="checkbox" class="shrink-0 size-4.5 bg-green-500 border-green-500 rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-green-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-green">
            <span class="ms-2 text-foreground">Green</span>
            <span class="ms-auto text-xs text-muted-foreground-1">(12)</span>
          </label>

<label for="hs-pro-shfloc-blue" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
            <input type="checkbox" class="shrink-0 size-4.5 bg-blue-500 border-blue-500 rounded-sm focus:ring-0 focus:ring-offset-0 checked:text-blue-500 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-blue">
            <span class="ms-2 text-foreground">Blue</span>
            <span class="ms-auto text-xs text-muted-foreground-1">(86)</span>
          </label>
          
        </div>

</div>

<div class="p-4 bg-layer rounded-lg shadow-2xs">
        <div class="mb-3">
          <span class="font-medium text-sm text-foreground">Price</span>
        </div>
        
        <div class="mb-3">
          
          <div class="space-y-0.5">
            
            <div class="flex items-center">
              <label for="hs-pro-shfloc-0-25" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-0-25">
                <span class="ms-2 text-foreground">$0-$25</span>
                <span class="ms-auto text-xs text-muted-foreground-1">(53)</span>
              </label>
            </div>

<div class="flex items-center">
              <label for="hs-pro-shfloc-25-50" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-25-50">
                <span class="ms-2 text-foreground">$25-$50</span>
                <span class="ms-auto text-xs text-muted-foreground-1">(92)</span>
              </label>
            </div>

<div class="flex items-center">
              <label for="hs-pro-shfloc-50-100" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-50-100">
                <span class="ms-2 text-foreground">$50-$100</span>
                <span class="ms-auto text-xs text-muted-foreground-1">(135)</span>
              </label>
            </div>

<div class="flex items-center">
              <label for="hs-pro-shfloc-100-150" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-100-150">
                <span class="ms-2 text-foreground">$100-$150</span>
                <span class="ms-auto text-xs text-muted-foreground-1">(27)</span>
              </label>
            </div>

<div class="flex items-center">
              <label for="hs-pro-shfloc-150-plus" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
                <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-150-plus">
                <span class="ms-2 text-foreground">$150+</span>
                <span class="ms-auto text-xs text-muted-foreground-1">(3)</span>
              </label>
            </div>
            
          </div>

<div class="mx-3 mt-5">
            <div class="flex justify-center w-full mb-5">
              <div class="flex items-center text-sm text-foreground">
                <div id="hs-pass-values-to-html-elements-min-target" class="text-center min-w-12">250</div>
                -
                <div id="hs-pass-values-to-html-elements-max-target" class="text-center min-w-12">750</div>
              </div>
            </div>
            <label class="sr-only">Example range</label>
            <div id="hs-pass-values-to-html-elements" class="--prevent-on-load-init" data-hs-range-slider='{
              "start": [250, 750],
              "range": {
                "min": 0,
                "max": 1000
              },
              "formatter": {
                "type": "integer",
                "prefix": "$"
              },
              "connect": true,
              "cssClasses": {
                "target": "relative h-1 rounded-full bg-surface",
                "base": "size-full relative z-1",
                "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                "handle": "absolute top-1/2 inset-e-0 size-5 bg-layer border-3 border-line-8 rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                "connects": "relative z-0 size-full rounded-full overflow-hidden",
                "connect": "absolute top-0 inset-e-0 z-1 size-full bg-secondary origin-top-left ",
                "touchArea": "absolute -top-1 -bottom-1 -inset-s-1 -inset-e-1"
              }
            }'></div>
          </div>
          
        </div>
      </div>

<div class="p-4 bg-layer rounded-lg shadow-2xs">
        <div class="mb-3">
          <span class="font-medium text-sm text-foreground">Fit</span>
        </div>
        
        
        <div class="space-y-0.5">
          
          <div class="flex items-center">
            <label for="hs-pro-shfloc-classic" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-classic">
              <span class="ms-2 text-foreground">Classic</span>
              <span class="ms-auto text-xs text-muted-foreground-1">(38)</span>
            </label>
          </div>

<div class="flex items-center">
            <label for="hs-pro-shfloc-modern" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-modern">
              <span class="ms-2 text-foreground">Modern</span>
              <span class="ms-auto text-xs text-muted-foreground-1">(1)</span>
            </label>
          </div>

<div class="flex items-center">
            <label for="hs-pro-shfloc-regular" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-regular">
              <span class="ms-2 text-foreground">Regular</span>
              <span class="ms-auto text-xs text-muted-foreground-1">(135)</span>
            </label>
          </div>

<div class="flex items-center">
            <label for="hs-pro-shfloc-relaxed" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-relaxed">
              <span class="ms-2 text-foreground">Relaxed</span>
              <span class="ms-auto text-xs text-muted-foreground-1">(26)</span>
            </label>
          </div>

<div class="flex items-center">
            <label for="hs-pro-shfloc-skinny" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-skinny">
              <span class="ms-2 text-foreground">Skinny</span>
              <span class="ms-auto text-xs text-muted-foreground-1">(3)</span>
            </label>
          </div>

<div class="flex items-center">
            <label for="hs-pro-shfloc-slim" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-slim">
              <span class="ms-2 text-foreground">Slim</span>
              <span class="ms-auto text-xs text-muted-foreground-1">(30)</span>
            </label>
          </div>

<div class="flex items-center">
            <label for="hs-pro-shfloc-straight" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-straight">
              <span class="ms-2 text-foreground">Straight</span>
              <span class="ms-auto text-xs text-muted-foreground-1">(9)</span>
            </label>
          </div>
          
        </div>
        
      </div>

<div class="p-4 bg-layer rounded-lg shadow-2xs">
        <div class="mb-3">
          <span class="font-medium text-sm text-foreground">Sleeve Length</span>
        </div>
        
        
        <div class="space-y-0.5">
          
          <div class="flex items-center">
            <label for="hs-pro-shfloc-long-sleeve" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-long-sleeve">
              <span class="ms-2 text-foreground">Long Sleeve</span>
              <span class="ms-auto text-xs text-muted-foreground-1">(56)</span>
            </label>
          </div>

<div class="flex items-center">
            <label for="hs-pro-shfloc-short-sleeve" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-short-sleeve">
              <span class="ms-2 text-foreground">Short Sleeve</span>
              <span class="ms-auto text-xs text-muted-foreground-1">(78)</span>
            </label>
          </div>

<div class="flex items-center">
            <label for="hs-pro-shfloc-sleeveless" class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shfloc-sleeveless">
              <span class="ms-2 text-foreground">Sleeveless</span>
              <span class="ms-auto text-xs text-muted-foreground-1">(2)</span>
            </label>
          </div>
          
        </div>
        
      </div>
      
    </div>
  </div>

<div class="p-6 border-t border-overlay-footer">
    <div class="flex items-center gap-x-2">
      <button type="button" class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-1.5 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-overlay="#hs-pro-shflo">
        <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
        Clear filters
      </button>

<button type="button" class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" data-hs-overlay="#hs-pro-shflo">
        Show items
      </button>
    </div>
  </div>
  
</div>

Scrollable admin drawer groups vendor, availability, tag, and product-type filters into checkbox sections with per-group clear actions.

<div id="hs-pro-epfo" class="hs-overlay hs-overlay-open:translate-x-0 hidden translate-x-full fixed top-0 inset-e-0 transition-all duration-300 transform size-full sm:w-100 z-80 flex flex-col bg-overlay border border-overlay-line" role="dialog" tabindex="-1" aria-labelledby="hs-pro-epfo-label">
  
  <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
    <h2 id="hs-pro-epfo-label" class="font-medium text-foreground">
      Filter
    </h2>
    <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-epfo">
      <span class="sr-only">Close</span>
      <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
    </button>
  </div>

<div class="h-[calc(100%-58px)] flex flex-col">
    
    <div class="h-full p-5 overflow-y-auto overflow-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
      
      <div class="pb-5 mb-5 last:pb-0 last:mb-0 border-b last:border-b-0 border-line-2">
        <label class="font-semibold text-xs uppercase text-foreground">
          Product vendor
        </label>

<div class="mt-3 grid grid-cols-2">
          <div class="space-y-2">
            
            <div class="flex items-center">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch1" checked>
              <label for="hs-pro-epfopvch1" class="ms-3 text-sm text-foreground">
                Google
              </label>
            </div>

<div class="flex items-center">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch2">
              <label for="hs-pro-epfopvch2" class="ms-3 text-sm text-foreground">
                Topman
              </label>
            </div>

<div class="flex items-center">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch3">
              <label for="hs-pro-epfopvch3" class="ms-3 text-sm text-foreground">
                RayBan
              </label>
            </div>

<div class="flex items-center">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch4">
              <label for="hs-pro-epfopvch4" class="ms-3 text-sm text-foreground">
                Mango
              </label>
            </div>

<div class="flex items-center">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch5">
              <label for="hs-pro-epfopvch5" class="ms-3 text-sm text-foreground">
                Calvin Klein
              </label>
            </div>

<div class="flex items-center">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch6">
              <label for="hs-pro-epfopvch6" class="ms-3 text-sm text-foreground">
                Givenchy
              </label>
            </div>

<div class="flex items-center">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch7">
              <label for="hs-pro-epfopvch7" class="ms-3 text-sm text-foreground">
                Asos
              </label>
            </div>

<div class="flex items-center">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch8">
              <label for="hs-pro-epfopvch8" class="ms-3 text-sm text-foreground">
                Apple
              </label>
            </div>

<div class="flex items-center">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch9">
              <label for="hs-pro-epfopvch9" class="ms-3 text-sm text-foreground">
                Zara
              </label>
            </div>
            
          </div>

<div class="space-y-2">
            
            <div class="flex items-center">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch10">
              <label for="hs-pro-epfopvch10" class="ms-3 text-sm text-foreground">
                Times
              </label>
            </div>

<div class="flex items-center">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch11">
              <label for="hs-pro-epfopvch11" class="ms-3 text-sm text-foreground">
                Nike
              </label>
            </div>

<div class="flex items-center">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch12">
              <label for="hs-pro-epfopvch12" class="ms-3 text-sm text-foreground">
                Adidas
              </label>
            </div>

<div class="flex items-center">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch17">
              <label for="hs-pro-epfopvch17" class="ms-3 text-sm text-foreground">
                Reebok
              </label>
            </div>

<div class="flex items-center">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch13">
              <label for="hs-pro-epfopvch13" class="ms-3 text-sm text-foreground">
                Levis
              </label>
            </div>

<div class="flex items-center">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch14">
              <label for="hs-pro-epfopvch14" class="ms-3 text-sm text-foreground">
                Beats
              </label>
            </div>

<div class="flex items-center">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch15">
              <label for="hs-pro-epfopvch15" class="ms-3 text-sm text-foreground">
                Clarke
              </label>
            </div>

<div class="flex items-center">
              <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfopvch16">
              <label for="hs-pro-epfopvch16" class="ms-3 text-sm text-foreground">
                Mango
              </label>
            </div>
            
          </div>
          
        </div>

<p class="mt-3">
          <button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-xs font-medium rounded-full bg-layer border border-dashed border-layer-line text-primary hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
            <svg class="shrink-0 size-3" 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 6 6 18"/><path d="m6 6 12 12"/></svg>
            Clear
          </button>
        </p>
        
      </div>

<div class="pb-5 mb-5 last:pb-0 last:mb-0 border-b last:border-b-0 border-line-2">
        <label class="font-semibold text-xs uppercase text-foreground">
          Availability
        </label>

<div class="mt-3 space-y-2">
          
          <div class="flex items-center">
            <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfoach1" checked>
            <label for="hs-pro-epfoach1" class="ms-3 text-sm text-foreground">
              Available on Online Store
            </label>
          </div>

<div class="flex items-center">
            <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-epfoach2">
            <label for="hs-pro-epfoach2" class="ms-3 text-sm text-foreground">
              Unavailable on Online Store
            </label>
          </div>
          
        </div>

<div class="pb-5 mb-5 last:pb-0 last:mb-0 border-b last:border-b-0 border-line-2">
        <label class="font-semibold text-xs uppercase text-foreground">
          Tagged with
        </label>

<div class="p-5 border-t border-overlay-footer">
      <div class="flex items-center gap-x-2">
        
        <button type="button" class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
          <svg class="hidden sm:block 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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
          Clear all filters
        </button>

<button type="button" class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary-focus" data-hs-overlay="#hs-pro-epfo">
          Save
        </button>
        
      </div>  
    </div>
    
  </div>
  
</div>

Filter Drawers

Storefront Filter Drawer with Price Slider Pro

Admin Product Filter Drawer with Checkbox Sections Pro