Tailwind CSS Option Pickers Blocks

All Blocks
Application UI
Forms
Option Pickers

Option Pickers

Option pickers for appearance settings, icon choices, color swatches, and button-based selections.

Video Call Selection Button Pro

Single toggle button swaps between two icon-and-label states for one call control.

<label for="hs-pro-vcmbgsr" class="relative group min-w-11 flex flex-col justify-center items-center text-center text-xs text-foreground cursor-pointer has-checked:text-red-500 dark:has-checked:text-red-400">
                      <input type="checkbox" id="hs-pro-vcmbgsr" class="hidden peer" name="hs-pro-vcmbgsr" checked>
                      <span class="peer-checked:hidden flex justify-center items-center gap-x-3 size-9 rounded-full transition group-hover:bg-surface-hover group-focus:bg-surface-focus">
                        <svg class="shrink-0 size-4 group-hover:scale-110 group-focus:scale-110 transition" 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="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>
                      </span>
                      <span class="peer-checked:hidden">Stop</span>
                      <span class="peer-checked:flex peer-checked:bg-red-500 peer-checked:text-foreground-inverse hidden justify-center items-center gap-x-3 size-9 rounded-full transition group-hover:bg-surface-hover group-focus:bg-surface-focus">
                        <svg class="shrink-0 size-4 group-hover:scale-110 group-focus:scale-110 transition" 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.66 6H14a2 2 0 0 1 2 2v2.5l5.248-3.062A.5.5 0 0 1 22 7.87v8.196"/><path d="M16 16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2"/><path d="m2 2 20 20"/></svg>
                      </span>
                      <span class="peer-checked:flex hidden">Start</span>
                    </label>

Compact icon grid presents multiple navigation options as evenly sized selectable tiles.

<div class="grid grid-cols-3 sm:grid-cols-4 gap-2">
                      <div class="flex justify-center items-center">
                        
                        <label for="hs-pro-vcsnbaich1" class="size-28 flex flex-col justify-center items-center gap-y-1 text-xs text-foreground cursor-pointer rounded-lg hover:bg-surface-hover">
                          <input type="checkbox" id="hs-pro-vcsnbaich1" class="hidden peer" value="Home" name="hs-pro-vcsnbaich" checked disabled>
                          <span class="flex justify-center items-center gap-x-3 size-9 bg-surface rounded-md peer-checked:bg-primary-checked peer-checked:text-primary-foreground peer-disabled:opacity-50 peer-disabled:pointer-events-none">
                            <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="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                          </span>
                          <span class="block">
                            Home
                          </span>
                        </label>
                        
                      </div>

<div class="flex justify-center items-center">
                        
                        <label for="hs-pro-vcsnbaich2" class="size-28 flex flex-col justify-center items-center gap-y-1 text-xs text-foreground cursor-pointer rounded-lg hover:bg-surface-hover">
                          <input type="checkbox" id="hs-pro-vcsnbaich2" class="hidden peer" value="Meetings" name="hs-pro-vcsnbaich" checked disabled>
                          <span class="flex justify-center items-center gap-x-3 size-9 bg-surface rounded-md peer-checked:bg-primary-checked peer-checked:text-primary-foreground peer-disabled:opacity-50 peer-disabled:pointer-events-none">
                            <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="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>
                          </span>
                          <span class="block">
                            Meetings
                          </span>
                        </label>
                        
                      </div>

<div class="flex justify-center items-center">
                        
                        <label for="hs-pro-vcsnbaich3" class="size-28 flex flex-col justify-center items-center gap-y-1 text-xs text-foreground cursor-pointer rounded-lg hover:bg-surface-hover">
                          <input type="checkbox" id="hs-pro-vcsnbaich3" class="hidden peer" value="Schedule" name="hs-pro-vcsnbaich" checked >
                          <span class="flex justify-center items-center gap-x-3 size-9 bg-surface rounded-md peer-checked:bg-primary-checked peer-checked:text-primary-foreground peer-disabled:opacity-50 peer-disabled:pointer-events-none">
                            <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="M16 14v2.2l1.6 1"/><path d="M16 2v4"/><path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5"/><path d="M3 10h5"/><path d="M8 2v4"/><circle cx="16" cy="16" r="6"/></svg>
                          </span>
                          <span class="block">
                            Schedule
                          </span>
                        </label>
                        
                      </div>

<div class="flex justify-center items-center">
                        
                        <label for="hs-pro-vcsnbaich4" class="size-28 flex flex-col justify-center items-center gap-y-1 text-xs text-foreground cursor-pointer rounded-lg hover:bg-surface-hover">
                          <input type="checkbox" id="hs-pro-vcsnbaich4" class="hidden peer" value="Settings" name="hs-pro-vcsnbaich" checked >
                          <span class="flex justify-center items-center gap-x-3 size-9 bg-surface rounded-md peer-checked:bg-primary-checked peer-checked:text-primary-foreground peer-disabled:opacity-50 peer-disabled:pointer-events-none">
                            <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="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
                          </span>
                          <span class="block">
                            Settings
                          </span>
                        </label>
                        
                      </div>

<div class="flex justify-center items-center">
                        
                        <label for="hs-pro-vcsnbaich5" class="size-28 flex flex-col justify-center items-center gap-y-1 text-xs text-foreground cursor-pointer rounded-lg hover:bg-surface-hover">
                          <input type="checkbox" id="hs-pro-vcsnbaich5" class="hidden peer" value="Livestreaming" name="hs-pro-vcsnbaich"  >
                          <span class="flex justify-center items-center gap-x-3 size-9 bg-surface rounded-md peer-checked:bg-primary-checked peer-checked:text-primary-foreground peer-disabled:opacity-50 peer-disabled:pointer-events-none">
                            <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="M16.247 7.761a6 6 0 0 1 0 8.478"/><path d="M19.075 4.933a10 10 0 0 1 0 14.134"/><path d="M4.925 19.067a10 10 0 0 1 0-14.134"/><path d="M7.753 16.239a6 6 0 0 1 0-8.478"/><circle cx="12" cy="12" r="2"/></svg>
                          </span>
                          <span class="block">
                            Livestreaming
                          </span>
                        </label>
                        
                      </div>

<div class="flex justify-center items-center">
                        
                        <label for="hs-pro-vcsnbaich6" class="size-28 flex flex-col justify-center items-center gap-y-1 text-xs text-foreground cursor-pointer rounded-lg hover:bg-surface-hover">
                          <input type="checkbox" id="hs-pro-vcsnbaich6" class="hidden peer" value="Recordings" name="hs-pro-vcsnbaich"  >
                          <span class="flex justify-center items-center gap-x-3 size-9 bg-surface rounded-md peer-checked:bg-primary-checked peer-checked:text-primary-foreground peer-disabled:opacity-50 peer-disabled:pointer-events-none">
                            <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="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>
                          </span>
                          <span class="block">
                            Recordings
                          </span>
                        </label>
                        
                      </div>

<div class="flex justify-center items-center">
                        
                        <label for="hs-pro-vcsnbaich7" class="size-28 flex flex-col justify-center items-center gap-y-1 text-xs text-foreground cursor-pointer rounded-lg hover:bg-surface-hover">
                          <input type="checkbox" id="hs-pro-vcsnbaich7" class="hidden peer" value="Whiteboard" name="hs-pro-vcsnbaich"  >
                          <span class="flex justify-center items-center gap-x-3 size-9 bg-surface rounded-md peer-checked:bg-primary-checked peer-checked:text-primary-foreground peer-disabled:opacity-50 peer-disabled:pointer-events-none">
                            <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="M2 3h20"/><path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"/><path d="m7 21 5-5 5 5"/></svg>
                          </span>
                          <span class="block">
                            Whiteboard
                          </span>
                        </label>
                        
                      </div>

<div class="flex justify-center items-center">
                        
                        <label for="hs-pro-vcsnbaich8" class="size-28 flex flex-col justify-center items-center gap-y-1 text-xs text-foreground cursor-pointer rounded-lg hover:bg-surface-hover">
                          <input type="checkbox" id="hs-pro-vcsnbaich8" class="hidden peer" value="Integrations" name="hs-pro-vcsnbaich"  >
                          <span class="flex justify-center items-center gap-x-3 size-9 bg-surface rounded-md peer-checked:bg-primary-checked peer-checked:text-primary-foreground peer-disabled:opacity-50 peer-disabled:pointer-events-none">
                            <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="M16.466 7.5C15.643 4.237 13.952 2 12 2 9.239 2 7 6.477 7 12s2.239 10 5 10c.342 0 .677-.069 1-.2"/><path d="m15.194 13.707 3.814 1.86-1.86 3.814"/><path d="M19 15.57c-1.804.885-4.274 1.43-7 1.43-5.523 0-10-2.239-10-5s4.477-5 10-5c4.838 0 8.873 1.718 9.8 4"/></svg>
                          </span>
                          <span class="block">
                            Integrations
                          </span>
                        </label>
                        
                      </div>
                    </div>

Open related video call template

Theme Appearance Picker Pro

Small segmented picker offers appearance modes with one card-style tile per option.

<div class="-mx-2 flex flex-wrap gap-x-2">
                      
                      <label for="hs-pro-vcsapLight" class="p-2 w-32 flex flex-col text-center cursor-pointer rounded-lg hover:bg-surface-hover">
                        <input type="radio" id="hs-pro-vcsapLight" name="hs-pro-hs-pro-vcsap" class="hidden peer" checked>
                        <span class="p-2 w-full h-18 bg-layer border border-layer-line rounded-lg ring-2 ring-transparent peer-checked:ring-primary-checked">
                          <span class="h-full flex items-center gap-x-2">
                            <span class="w-5 h-full block bg-surface-1 rounded-sm"></span>
                            <span class="grow h-full relative">
                              <span class="block size-full bg-surface-1 rounded-sm"></span>
                            </span>
                          </span>
                        </span>
                        <span class="p-2 text-xs text-foreground">
                          Light
                        </span>
                      </label>

<label for="hs-pro-vcsapDark" class="p-2 w-32 flex flex-col text-center cursor-pointer rounded-lg hover:bg-surface-hover">
                        <input type="radio" id="hs-pro-vcsapDark" name="hs-pro-hs-pro-vcsap" class="hidden peer">
                        <span class="p-2 w-full h-18 bg-secondary rounded-lg ring-2 ring-transparent peer-checked:ring-primary-checked">
                          <span class="h-full flex items-center gap-x-2">
                            <span class="w-5 h-full block bg-surface-5 rounded-sm"></span>
                            <span class="grow h-full">
                              <span class="block size-full bg-surface-5 rounded-sm"></span>
                            </span>
                          </span>
                        </span>
                        <span class="p-2 text-xs text-foreground">
                          Dark
                        </span>
                      </label>

<label for="hs-pro-vcsapSystem" class="p-2 w-32 flex flex-col text-center cursor-pointer rounded-lg hover:bg-surface-hover">
                        <input type="radio" id="hs-pro-vcsapSystem" name="hs-pro-hs-pro-vcsap" class="hidden peer">
                        <span class="flex items-center rounded-lg ring-2 ring-transparent peer-checked:ring-primary-checked">
                          <span class="p-2 pe-0 w-full h-18 bg-layer border border-layer-line rounded-s-lg">
                            <span class="h-full flex items-center gap-x-2">
                              <span class="w-5 h-full block bg-surface-1 rounded-sm"></span>
                              <span class="grow h-full">
                                <span class="block size-full bg-surface-1 rounded-s-sm"></span>
                              </span>
                            </span>
                          </span>
                          <span class="p-2 ps-0 w-full h-18 bg-secondary rounded-e-lg">
                            <span class="block size-full bg-surface-5 rounded-e-sm"></span>
                          </span> 
                        </span>
                        <span class="p-2 text-xs text-foreground">
                          System settings
                        </span>
                      </label>
                      
                    </div>

Open related video call template

Badge Icon Option Buttons Pro

Pill-shaped toggle buttons combine icons and labels for a compact multi-option selector.

<div class="flex flex-wrap gap-2">
  
  <label for="hs-pro-pytfmty-1" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
  has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
  dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
  has-disabled:pointer-events-none
  has-disabled:text-muted-foreground/30">
    <input type="checkbox" id="hs-pro-pytfmty-1" class="hidden peer" name="hs-pro-pytfmty" >
    <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
      <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
    </span>
    <span class="block">
      Transfers
    </span>
  </label>

<label for="hs-pro-pytfmty-2" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
  has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
  dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
  has-disabled:pointer-events-none
  has-disabled:text-muted-foreground/30">
    <input type="checkbox" id="hs-pro-pytfmty-2" class="hidden peer" name="hs-pro-pytfmty" >
    <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
      <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
    </span>
    <span class="block">
      Cash withdrawal
    </span>
  </label>

<label for="hs-pro-pytfmty-3" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
  has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
  dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
  has-disabled:pointer-events-none
  has-disabled:text-muted-foreground/30">
    <input type="checkbox" id="hs-pro-pytfmty-3" class="hidden peer" name="hs-pro-pytfmty" >
    <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
      <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
    </span>
    <span class="block">
      Card transactions
    </span>
  </label>

<label for="hs-pro-pytfmty-4" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
  has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
  dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
  has-disabled:pointer-events-none
  has-disabled:text-muted-foreground/30">
    <input type="checkbox" id="hs-pro-pytfmty-4" class="hidden peer" name="hs-pro-pytfmty" >
    <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
      <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
    </span>
    <span class="block">
      Direct debits
    </span>
  </label>

<label for="hs-pro-pytfmty-5" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
  has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
  dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
  has-disabled:pointer-events-none
  has-disabled:text-muted-foreground/30">
    <input type="checkbox" id="hs-pro-pytfmty-5" class="hidden peer" name="hs-pro-pytfmty" >
    <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
      <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
    </span>
    <span class="block">
      Batch transfers
    </span>
  </label>

<label for="hs-pro-pytfmty-6" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
  has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
  dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
  has-disabled:pointer-events-none
  has-disabled:text-muted-foreground/30">
    <input type="checkbox" id="hs-pro-pytfmty-6" class="hidden peer" name="hs-pro-pytfmty" >
    <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
      <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
    </span>
    <span class="block">
      Money added
    </span>
  </label>

<label for="hs-pro-pytfmty-7" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
  has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
  dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
  has-disabled:pointer-events-none
  has-disabled:text-muted-foreground/30">
    <input type="checkbox" id="hs-pro-pytfmty-7" class="hidden peer" name="hs-pro-pytfmty" >
    <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
      <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
    </span>
    <span class="block">
      Prefunding transfers
    </span>
  </label>

<label for="hs-pro-pytfmty-8" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
  has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
  dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
  has-disabled:pointer-events-none
  has-disabled:text-muted-foreground/30">
    <input type="checkbox" id="hs-pro-pytfmty-8" class="hidden peer" name="hs-pro-pytfmty" >
    <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
      <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
    </span>
    <span class="block">
      Auto conversions
    </span>
  </label>

<label for="hs-pro-pytfmty-9" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
  has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
  dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
  has-disabled:pointer-events-none
  has-disabled:text-muted-foreground/30">
    <input type="checkbox" id="hs-pro-pytfmty-9" class="hidden peer" name="hs-pro-pytfmty" >
    <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
      <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
    </span>
    <span class="block">
      Conversions
    </span>
  </label>

<label for="hs-pro-pytfmty-10" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
  has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
  dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
  has-disabled:pointer-events-none
  has-disabled:text-muted-foreground/30">
    <input type="checkbox" id="hs-pro-pytfmty-10" class="hidden peer" name="hs-pro-pytfmty" >
    <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
      <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
    </span>
    <span class="block">
      Asset fees
    </span>
  </label>
  
</div>

Centered Icon Checkboxes Pro

Centered three-column grid uses large checkbox cards with icons and labels for each choice.

<h2 class="mb-4 font-medium text-foreground">
                      Your interests
                    </h2>

<div class="grid grid-cols-3 sm:grid-cols-4 gap-3">
                      
                      <label for="hs-pro-shenli1" class="p-2 sm:p-3 text-xs flex flex-col justify-center items-center sm:text-[13px] text-center bg-layer text-layer-foreground border border-layer-line has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                        <input type="checkbox" id="hs-pro-shenli1" class="hidden" value="Gaming" name="hs-pro-shenli" >
                        <svg class="shrink-0 size-6 mx-auto" 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"><line x1="6" x2="10" y1="11" y2="11"/><line x1="8" x2="8" y1="9" y2="13"/><line x1="15" x2="15.01" y1="12" y2="12"/><line x1="18" x2="18.01" y1="10" y2="10"/><path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"/></svg><span class="block mt-2">Gaming</span>
                      </label>

<label for="hs-pro-shenli2" class="p-2 sm:p-3 text-xs flex flex-col justify-center items-center sm:text-[13px] text-center bg-layer text-layer-foreground border border-layer-line has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                        <input type="checkbox" id="hs-pro-shenli2" class="hidden" value="Golf" name="hs-pro-shenli" >
                        <svg class="shrink-0 size-6 mx-auto" 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="m12 8 6-3-6-3v10"/><path d="m8 11.99-5.5 3.14a1 1 0 0 0 0 1.74l8.5 4.86a2 2 0 0 0 2 0l8.5-4.86a1 1 0 0 0 0-1.74L16 12"/><path d="m6.49 12.85 11.02 6.3"/><path d="M17.51 12.85 6.5 19.15"/></svg><span class="block mt-2">Golf</span>
                      </label>

<label for="hs-pro-shenli3" class="p-2 sm:p-3 text-xs flex flex-col justify-center items-center sm:text-[13px] text-center bg-layer text-layer-foreground border border-layer-line has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                        <input type="checkbox" id="hs-pro-shenli3" class="hidden" value="Fitness" name="hs-pro-shenli" checked>
                        <svg class="shrink-0 size-6 mx-auto" 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.4 14.4 9.6 9.6"/><path d="M18.657 21.485a2 2 0 1 1-2.829-2.828l-1.767 1.768a2 2 0 1 1-2.829-2.829l6.364-6.364a2 2 0 1 1 2.829 2.829l-1.768 1.767a2 2 0 1 1 2.828 2.829z"/><path d="m21.5 21.5-1.4-1.4"/><path d="M3.9 3.9 2.5 2.5"/><path d="M6.404 12.768a2 2 0 1 1-2.829-2.829l1.768-1.767a2 2 0 1 1-2.828-2.829l2.828-2.828a2 2 0 1 1 2.829 2.828l1.767-1.768a2 2 0 1 1 2.829 2.829z"/></svg><span class="block mt-2">Fitness</span>
                      </label>

<label for="hs-pro-shenli4" class="p-2 sm:p-3 text-xs flex flex-col justify-center items-center sm:text-[13px] text-center bg-layer text-layer-foreground border border-layer-line has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                        <input type="checkbox" id="hs-pro-shenli4" class="hidden" value="Skiing" name="hs-pro-shenli" >
                        <svg class="shrink-0 size-6 mx-auto" 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="M10 3h.01"/><path d="M14 2h.01"/><path d="m2 9 20-5"/><path d="M12 12V6.5"/><rect width="16" height="10" x="4" y="12" rx="3"/><path d="M9 12v5"/><path d="M15 12v5"/><path d="M4 17h16"/></svg><span class="block mt-2">Skiing</span>
                      </label>

<label for="hs-pro-shenli5" class="p-2 sm:p-3 text-xs flex flex-col justify-center items-center sm:text-[13px] text-center bg-layer text-layer-foreground border border-layer-line has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                        <input type="checkbox" id="hs-pro-shenli5" class="hidden" value="Biking" name="hs-pro-shenli" checked>
                        <svg class="shrink-0 size-6 mx-auto" 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"><circle cx="18.5" cy="17.5" r="3.5"/><circle cx="5.5" cy="17.5" r="3.5"/><circle cx="15" cy="5" r="1"/><path d="M12 17.5V14l-3-3 4-3 2 3h2"/></svg><span class="block mt-2">Biking</span>
                      </label>

<label for="hs-pro-shenli6" class="p-2 sm:p-3 text-xs flex flex-col justify-center items-center sm:text-[13px] text-center bg-layer text-layer-foreground border border-layer-line has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                        <input type="checkbox" id="hs-pro-shenli6" class="hidden" value="Sailing" name="hs-pro-shenli" >
                        <svg class="shrink-0 size-6 mx-auto" 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="M22 18H2a4 4 0 0 0 4 4h12a4 4 0 0 0 4-4Z"/><path d="M21 14 10 2 3 14h18Z"/><path d="M10 2v16"/></svg><span class="block mt-2">Sailing</span>
                      </label>

<label for="hs-pro-shenli7" class="p-2 sm:p-3 text-xs flex flex-col justify-center items-center sm:text-[13px] text-center bg-layer text-layer-foreground border border-layer-line has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                        <input type="checkbox" id="hs-pro-shenli7" class="hidden" value="Climbing" name="hs-pro-shenli" >
                        <svg class="shrink-0 size-6 mx-auto" 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="m8 3 4 8 5-5 5 15H2L8 3z"/></svg><span class="block mt-2">Climbing</span>
                      </label>

<label for="hs-pro-shenli8" class="p-2 sm:p-3 text-xs flex flex-col justify-center items-center sm:text-[13px] text-center bg-layer text-layer-foreground border border-layer-line has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                        <input type="checkbox" id="hs-pro-shenli8" class="hidden" value="Hiking" name="hs-pro-shenli" checked>
                        <svg class="shrink-0 size-6 mx-auto" 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"><circle cx="4" cy="4" r="2"/><path d="m14 5 3-3 3 3"/><path d="m14 10 3-3 3 3"/><path d="M17 14V2"/><path d="M17 14H7l-5 8h20Z"/><path d="M8 14v8"/><path d="m9 14 5 8"/></svg><span class="block mt-2">Hiking</span>
                      </label>
                      
                    </div>

Size Option Picker Pro

Dense size grid pairs one heading row with evenly spaced radio options for each size.

<div class="mt-2 grid grid-cols-4 gap-2">
  
  <label for="hs-pro-shfdsr-us-6and5" 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="radio" id="hs-pro-shfdsr-us-6and5" class="hidden" name="hs-pro-shfdsr" >
    <span class="block">
      6.5
    </span>
  </label>

<label for="hs-pro-shfdsr-us-7" 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="radio" id="hs-pro-shfdsr-us-7" class="hidden" name="hs-pro-shfdsr" >
    <span class="block">
      7
    </span>
  </label>

<label for="hs-pro-shfdsr-us-7and5" 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="radio" id="hs-pro-shfdsr-us-7and5" class="hidden" name="hs-pro-shfdsr" disabled>
    <span class="block">
      7.5
    </span>
  </label>

<label for="hs-pro-shfdsr-us-8" 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="radio" id="hs-pro-shfdsr-us-8" class="hidden" name="hs-pro-shfdsr" >
    <span class="block">
      8
    </span>
  </label>

<label for="hs-pro-shfdsr-us-8and5" 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="radio" id="hs-pro-shfdsr-us-8and5" class="hidden" name="hs-pro-shfdsr" disabled>
    <span class="block">
      8.5
    </span>
  </label>

<label for="hs-pro-shfdsr-us-9" 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="radio" id="hs-pro-shfdsr-us-9" class="hidden" name="hs-pro-shfdsr" disabled>
    <span class="block">
      9
    </span>
  </label>

<label for="hs-pro-shfdsr-us-9and5" 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="radio" id="hs-pro-shfdsr-us-9and5" class="hidden" name="hs-pro-shfdsr" >
    <span class="block">
      9.5
    </span>
  </label>

<label for="hs-pro-shfdsr-us-10" 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="radio" id="hs-pro-shfdsr-us-10" class="hidden" name="hs-pro-shfdsr" disabled>
    <span class="block">
      10
    </span>
  </label>

<label for="hs-pro-shfdsr-us-10and5" 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="radio" id="hs-pro-shfdsr-us-10and5" class="hidden" name="hs-pro-shfdsr" >
    <span class="block">
      10.5
    </span>
  </label>

<label for="hs-pro-shfdsr-us-11" 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="radio" id="hs-pro-shfdsr-us-11" class="hidden" name="hs-pro-shfdsr" disabled>
    <span class="block">
      11
    </span>
  </label>

<label for="hs-pro-shfdsr-us-11and5" 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="radio" id="hs-pro-shfdsr-us-11and5" class="hidden" name="hs-pro-shfdsr" >
    <span class="block">
      11.5
    </span>
  </label>

<label for="hs-pro-shfdsr-us-12" 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="radio" id="hs-pro-shfdsr-us-12" class="hidden" name="hs-pro-shfdsr" >
    <span class="block">
      12
    </span>
  </label>
  
</div>

Color Options with Counts Pro

Vertical filter list combines color checkboxes with right-aligned result counts on each row.

<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>

Centered Icon Radio Options Pro

Three-column radio grid centers large icons and labels inside mutually exclusive option cards.

<div class="grid grid-cols-3 gap-3">
  
  <label for="hs-pro-shwrvtgri1" class="p-2 sm:p-3 text-xs flex flex-col justify-center items-center sm:text-[13px] text-center bg-layer text-layer-foreground border border-layer-line has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
    <input type="radio" id="hs-pro-shwrvtgri1" class="hidden" value="@@title" name="hs-pro-shwrvtgri" >
    <svg class="shrink-0 size-7 mx-auto" 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"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="M6 8h.01"/><path d="M10 8h.01"/><path d="M14 8h.01"/></svg><span class="block mt-2">Preline Website</span>
  </label>

<label for="hs-pro-shwrvtgri2" class="p-2 sm:p-3 text-xs flex flex-col justify-center items-center sm:text-[13px] text-center bg-layer text-layer-foreground border border-layer-line has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
    <input type="radio" id="hs-pro-shwrvtgri2" class="hidden" value="@@title" name="hs-pro-shwrvtgri" >
    <svg class="shrink-0 size-7 mx-auto" 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="M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z"/><path d="M21 16v2a4 4 0 0 1-4 4h-5"/></svg><span class="block mt-2">Customer Service</span>
  </label>

<label for="hs-pro-shwrvtgri3" class="p-2 sm:p-3 text-xs flex flex-col justify-center items-center sm:text-[13px] text-center bg-layer text-layer-foreground border border-layer-line has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
    <input type="radio" id="hs-pro-shwrvtgri3" class="hidden" value="@@title" name="hs-pro-shwrvtgri" >
    <svg class="shrink-0 size-7 mx-auto" 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="M18 8c0 3.613-3.869 7.429-5.393 8.795a1 1 0 0 1-1.214 0C9.87 15.429 6 11.613 6 8a6 6 0 0 1 12 0"/><circle cx="12" cy="8" r="2"/><path d="M8.714 14h-3.71a1 1 0 0 0-.948.683l-2.004 6A1 1 0 0 0 3 22h18a1 1 0 0 0 .948-1.316l-2-6a1 1 0 0 0-.949-.684h-3.712"/></svg><span class="block mt-2">Our Store</span>
  </label>
  
</div>

Open related storefront homepage

Color Swatch Picker Pro

Minimal swatch row presents color choices as small selectable blocks with a current label below.

<h2 class="font-medium text-foreground">
  Color
</h2>

<div class="mt-2 flex flex-wrap gap-3">
  
  <label for="hs-pro-shgctn1" class="size-7 rounded-md flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
    <input type="radio" id="hs-pro-shgctn1" class="hidden" value="@@title" name="hs-pro-shgctn" >
    <span class="size-7 bg-inverse rounded-md"></span>
  </label>

<label for="hs-pro-shgctn2" class="size-7 rounded-md flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
    <input type="radio" id="hs-pro-shgctn2" class="hidden" value="@@title" name="hs-pro-shgctn" >
    <span class="size-7 bg-plain border border-line-2 rounded-md"></span>
  </label>
  
  
  
  <label for="hs-pro-shgctn4" class="size-7 rounded-md flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
    <input type="radio" id="hs-pro-shgctn4" class="hidden" value="@@title" name="hs-pro-shgctn" checked>
    <span class="size-7 bg-surface-2 rounded-md"></span>
  </label>
  
</div>

<p class="mt-2 text-xs text-muted-foreground-1">
  Light Grey
</p>

Split Selector with Options Pro

Split selector combines a primary choice toggle with a dropdown list of secondary options.

<div class="p-1">
                            <div class="py-2 px-3">
                              <span class="block font-semibold text-foreground">
                                Download Report
                              </span>
                              <span class="block text-xs text-muted-foreground-1">
                                Select Options
                              </span>
                            </div>

<div class="py-1 px-2">
                              <div class="flex items-center bg-surface rounded-xl p-1">
                                <label for="hs-pro-dbrrtchddts1" class="relative py-1.5 px-3 w-full cursor-pointer text-center text-sm text-foreground rounded-lg has-checked:bg-layer has-checked:shadow-2xs">
                                  <svg class="relative z-10 me-1.5 inline-block align-middle shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.0324 1.91994H9.45071C9.09999 1.91994 8.76367 2.05926 8.51567 2.30725C8.26767 2.55523 8.12839 2.89158 8.12839 3.24228V8.86395L20.0324 15.8079L25.9844 18.3197L31.9364 15.8079V8.86395L20.0324 1.91994Z" fill="#21A366"/><path d="M8.12839 8.86395H20.0324V15.8079H8.12839V8.86395Z" fill="#107C41"/><path d="M30.614 1.91994H20.0324V8.86395H31.9364V3.24228C31.9364 2.89158 31.7971 2.55523 31.5491 2.30725C31.3011 2.05926 30.9647 1.91994 30.614 1.91994Z" fill="#33C481"/><path d="M20.0324 15.8079H8.12839V28.3736C8.12839 28.7243 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.6959 9.45071 29.6959H30.6141C30.9647 29.6959 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7243 31.9364 28.3736V22.7519L20.0324 15.8079Z" fill="#185C37"/><path d="M20.0324 15.8079H31.9364V22.7519H20.0324V15.8079Z" fill="#107C41"/><path opacity="0.1" d="M16.7261 6.87994H8.12839V25.7279H16.7261C17.0764 25.7269 17.4121 25.5872 17.6599 25.3395C17.9077 25.0917 18.0473 24.756 18.0484 24.4056V8.20226C18.0473 7.8519 17.9077 7.51616 17.6599 7.2684C17.4121 7.02064 17.0764 6.88099 16.7261 6.87994Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M15.7341 7.87194H8.12839V26.7199H15.7341C16.0844 26.7189 16.4201 26.5792 16.6679 26.3315C16.9157 26.0837 17.0553 25.748 17.0564 25.3976V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M15.7341 7.87194H8.12839V24.7359H15.7341C16.0844 24.7349 16.4201 24.5952 16.6679 24.3475C16.9157 24.0997 17.0553 23.764 17.0564 23.4136V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M14.7421 7.87194H8.12839V24.7359H14.7421C15.0924 24.7349 15.4281 24.5952 15.6759 24.3475C15.9237 24.0997 16.0633 23.764 16.0644 23.4136V9.19426C16.0633 8.84386 15.9237 8.50818 15.6759 8.26042C15.4281 8.01266 15.0924 7.87299 14.7421 7.87194Z" class="fill-foreground" fill="currentColor"/><path d="M1.51472 7.87194H14.7421C15.0927 7.87194 15.4291 8.01122 15.6771 8.25922C15.925 8.50722 16.0644 8.84354 16.0644 9.19426V22.4216C16.0644 22.7723 15.925 23.1087 15.6771 23.3567C15.4291 23.6047 15.0927 23.7439 14.7421 23.7439H1.51472C1.16402 23.7439 0.827672 23.6047 0.579686 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579686 8.25922C0.827672 8.01122 1.16402 7.87194 1.51472 7.87194Z" fill="#107C41"/><path d="M3.69711 20.7679L6.90722 15.794L3.96694 10.8479H6.33286L7.93791 14.0095C8.08536 14.3091 8.18688 14.5326 8.24248 14.68H8.26328C8.36912 14.4407 8.47984 14.2079 8.5956 13.9817L10.3108 10.8479H12.4822L9.46656 15.7663L12.5586 20.7679H10.2473L8.3932 17.2959C8.30592 17.148 8.23184 16.9927 8.172 16.8317H8.14424C8.09016 16.9891 8.01824 17.1399 7.92998 17.2811L6.02236 20.7679H3.69711Z" fill="white"/></svg><span class="relative z-10 align-middle">Excel</span>
                                  <input type="radio" name="hs-pro-dbrrtchddts" class="hidden" id="hs-pro-dbrrtchddts1" checked >
                                </label>

<div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                              <label for="hs-pro-dbrrtchdds1" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                <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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>Section name
                              </label>
                              <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-dbrrtchdds1" checked >
                            </div>
                            <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                              <label for="hs-pro-dbrrtchdds2" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                <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="M16 22h2a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v3"/><polyline points="14 2 14 8 20 8"/><path d="M4.04 11.71a5.84 5.84 0 1 0 8.2 8.29"/><path d="M13.83 16A5.83 5.83 0 0 0 8 10.17V16h5.83Z"/></svg>Comparison stats
                              </label>
                              <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-dbrrtchdds2" checked >
                            </div>
                            <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                              <label for="hs-pro-dbrrtchdds3" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                                <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"><circle cx="12" cy="12" r="10"/></svg>Legend indicator
                              </label>
                              <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-dbrrtchdds3" checked >
                            </div>

<button type="button" class="w-full py-2 px-3 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">
                              Download
                            </button>
                          </div>

Open related admin dashboard template