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.

Create a responsive UI block named "Video Call Selection Button" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/option-pickers/#video-call-selection-button. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: forms/option-pickers
- Block ID: video-call-selection-button
- Source description: Single toggle button swaps between two icon-and-label states for one call control.
- Preview iframe: https://preline.co/blocks/forms/option-pickers/iframes/pro/video-call-selection-button.html (repo path: blocks/forms/option-pickers/iframes/pro/video-call-selection-button.html)
- Source markup reference:
  - partials/pro/video-call/radio-and-checkbox/button.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

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

Segmented Recurrence Picker New Pro

Four cadence options share one inline track under a short question label; the checked option lifts onto a raised card.

Create a responsive UI block named "Segmented Recurrence Picker" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/option-pickers/#segmented-recurrence-picker. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/option-pickers
- Block ID: segmented-recurrence-picker
- Source description: Four cadence options share one inline track under a short question label; the checked option lifts onto a raised card.
- Preview iframe: https://preline.co/blocks/forms/option-pickers/iframes/pro/segmented-recurrence-picker.html (repo path: blocks/forms/option-pickers/iframes/pro/segmented-recurrence-picker.html)
- Source markup reference:
  - partials/pro/finance-tracker/sources/income-cadence-picker.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
  - The whole block is one `<div>` holding an `<h3 class="text-sm font-medium text-foreground">` reading `How often`, then a single control row `mt-2` below it. There is no card wrapper, border, helper text, or footer.
  - The control row is `mt-2 p-1 flex bg-surface rounded-xl` with `role="radiogroup"` and `aria-label="Payment cadence"`. The tinted track and its `p-1` inset are what make the checked segment read as raised, so keep both.
  - Four segments in this order: `One-time`, `Weekly`, `Biweekly`, `Monthly`. `Monthly` is checked on first load.
  - Each segment is a `<label>` (`py-1.5 px-2 grow basis-0 flex justify-center items-center text-center text-xs rounded-lg cursor-pointer`) wrapping a `class="hidden peer"` `type="radio"`, all sharing one `name`. `grow basis-0` is what makes the four segments split the track evenly regardless of label length.
  - Resting segments are `text-muted-foreground-1` and go `hover:text-foreground`. The checked segment is styled purely with `has-checked:` on the label: `has-checked:bg-layer has-checked:shadow-2xs has-checked:font-medium has-checked:text-foreground`. Do not reach for JavaScript or a wrapper class to drive the selected look.
  - Because the input is `hidden`, keep the label/`for` pairing and the shared `name` intact so arrow-key radio-group semantics and the click target both still work.
  - The block ships no stylesheet, no init script, and no icons; it needs no JavaScript at all.

<div>
                      <h3 class="text-sm font-medium text-foreground">
                        How often
                      </h3>

<label for="hs-pro-rpwnd-cadence-weekly" class="py-1.5 px-2 grow basis-0 flex justify-center items-center text-center text-xs text-muted-foreground-1 rounded-lg cursor-pointer hover:text-foreground has-checked:bg-layer has-checked:shadow-2xs has-checked:font-medium has-checked:text-foreground">
                          <input type="radio" id="hs-pro-rpwnd-cadence-weekly" name="hs-pro-rpwnd-cadence" value="weekly" class="hidden peer">
                          Weekly
                        </label>

<label for="hs-pro-rpwnd-cadence-biweekly" class="py-1.5 px-2 grow basis-0 flex justify-center items-center text-center text-xs text-muted-foreground-1 rounded-lg cursor-pointer hover:text-foreground has-checked:bg-layer has-checked:shadow-2xs has-checked:font-medium has-checked:text-foreground">
                          <input type="radio" id="hs-pro-rpwnd-cadence-biweekly" name="hs-pro-rpwnd-cadence" value="biweekly" class="hidden peer">
                          Biweekly
                        </label>

<label for="hs-pro-rpwnd-cadence-monthly" class="py-1.5 px-2 grow basis-0 flex justify-center items-center text-center text-xs text-muted-foreground-1 rounded-lg cursor-pointer hover:text-foreground has-checked:bg-layer has-checked:shadow-2xs has-checked:font-medium has-checked:text-foreground">
                          <input type="radio" id="hs-pro-rpwnd-cadence-monthly" name="hs-pro-rpwnd-cadence" value="monthly" class="hidden peer" checked>
                          Monthly
                        </label>
                      </div>
                    </div>

Open related finance tracker template

Brand Tile Radio Group With Overflow Search New Pro

Recent brand tiles sit in a fixed row while the full list stays behind a searchable select that expands from the count.

Create a responsive UI block named "Brand Tile Radio Group With Overflow Search" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/option-pickers/#brand-tile-radio-group-with-overflow-search. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/option-pickers
- Block ID: brand-tile-radio-group-with-overflow-search
- Source description: Recent brand tiles sit in a fixed row while the full list stays behind a searchable select that expands from the count.
- Preview iframe: https://preline.co/blocks/forms/option-pickers/iframes/pro/brand-tile-radio-group-with-overflow-search.html (repo path: blocks/forms/option-pickers/iframes/pro/brand-tile-radio-group-with-overflow-search.html)
- Source markup reference:
  - partials/pro/finance-tracker/sources/income-payer-picker.html
  - partials/pro/finance-tracker/sources/income-payer-tile.html
  - partials/layout/brand-logo.html

<div>
                      <div class="flex justify-between items-baseline gap-x-3">
                        <h3 class="text-sm font-medium text-foreground">
                          Who pays you
                        </h3>

<button id="hs-pro-btrgos-payer-all-toggle" type="button" class="hs-collapse-toggle shrink-0 inline-flex items-center gap-x-1 text-xs text-muted-foreground-1 hover:text-foreground focus:outline-hidden focus:text-foreground" aria-expanded="false" aria-controls="hs-pro-btrgos-payer-all" data-hs-collapse="#hs-pro-btrgos-payer-all">
                          <span class="hs-collapse-open:hidden">9 saved payers</span>
                          <span class="hidden hs-collapse-open:block">Hide search</span>
                          <svg class="hs-collapse-open:rotate-180 shrink-0 size-3 transition-transform" 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" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
                        </button>
                      </div>

<div class="mt-2 grid grid-cols-5 gap-2" role="group" aria-label="Recent payers">
                        
                        <label for="hs-pro-btrgos-payer-figma" class="p-2 flex flex-col justify-center items-center gap-y-1.5 bg-layer border border-layer-line ring-1 ring-transparent rounded-xl cursor-pointer hover:border-primary-hover has-checked:border-primary has-checked:ring-primary">
                          <input type="radio" id="hs-pro-btrgos-payer-figma" name="hs-pro-btrgos-payer" value="figma" class="hidden peer">

<span class="w-full truncate text-center text-[11px] text-muted-foreground-1 peer-checked:text-foreground">
                            Figma
                          </span>
                        </label>
                        

                        <label for="hs-pro-btrgos-payer-slack" class="p-2 flex flex-col justify-center items-center gap-y-1.5 bg-layer border border-layer-line ring-1 ring-transparent rounded-xl cursor-pointer hover:border-primary-hover has-checked:border-primary has-checked:ring-primary">
                          <input type="radio" id="hs-pro-btrgos-payer-slack" name="hs-pro-btrgos-payer" value="slack" class="hidden peer">

<span class="w-full truncate text-center text-[11px] text-muted-foreground-1 peer-checked:text-foreground">
                            Slack
                          </span>
                        </label>
                        

                        <label for="hs-pro-btrgos-payer-upwork" class="p-2 flex flex-col justify-center items-center gap-y-1.5 bg-layer border border-layer-line ring-1 ring-transparent rounded-xl cursor-pointer hover:border-primary-hover has-checked:border-primary has-checked:ring-primary">
                          <input type="radio" id="hs-pro-btrgos-payer-upwork" name="hs-pro-btrgos-payer" value="upwork" class="hidden peer">

<span class="w-full truncate text-center text-[11px] text-muted-foreground-1 peer-checked:text-foreground">
                            Upwork
                          </span>
                        </label>
                        

                        <label for="hs-pro-btrgos-payer-mailchimp" class="p-2 flex flex-col justify-center items-center gap-y-1.5 bg-layer border border-layer-line ring-1 ring-transparent rounded-xl cursor-pointer hover:border-primary-hover has-checked:border-primary has-checked:ring-primary">
                          <input type="radio" id="hs-pro-btrgos-payer-mailchimp" name="hs-pro-btrgos-payer" value="mailchimp" class="hidden peer">

<span class="w-full truncate text-center text-[11px] text-muted-foreground-1 peer-checked:text-foreground">
                            Mailchimp
                          </span>
                        </label>

<div id="hs-pro-btrgos-payer-all" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-pro-btrgos-payer-all-toggle" role="region">
                        <div class="pt-2">
                          <label for="hs-pro-btrgos-payer-search" class="sr-only">
                            Search all payers
                          </label>

<select id="hs-pro-btrgos-payer-search" data-hs-select='{
                              "placeholder": "Search all payers",
                              "hasSearch": true,
                              "searchPlaceholder": "Type a payer name",
                              "searchClasses": "block py-2 px-3 w-full sm:text-sm bg-transparent border-select-line rounded-lg text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus",
                              "searchWrapperClasses": "bg-select p-2 -mx-1 sticky top-0",
                              "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"flex items-center gap-x-2\"><span class=\"flex empty:hidden\" data-icon></span><span data-title></span></span></button>",
                              "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-3 pe-9 flex w-full items-center gap-x-2 text-nowrap cursor-pointer bg-layer border border-layer-line rounded-lg text-start sm:text-sm text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus",
                              "dropdownScope": "window",
                              "dropdownPlacement": "bottom",
                              "dropdownAutoPlacement": true,
                              "viewport": "#hs-pro-btrgos-body",
                              "dropdownClasses": "mt-2 p-1 pt-0 space-y-0.5 z-90 w-full max-h-60 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                              "optionClasses": "hs-selected:bg-select-item-active py-2 px-3 w-full sm:text-sm text-select-item-foreground rounded-lg cursor-pointer hover:bg-select-item-hover focus:outline-hidden focus:bg-select-item-focus",
                              "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span class=\"flex items-center gap-x-2\"><span data-icon></span><span data-title></span></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m5 12 4 4L19 6\"/></svg></span></div>",
                              "extraMarkup": "<div class=\"absolute top-1/2 inset-e-3 -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"/></svg></div>"
                            }' class="hidden">
                              <option value="">Choose</option>
                              <option data-hs-select-option='{"icon": "<svg class=\"size-4 shrink-0\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\"><path d=\"M11.3333 32C14.2773 32 16.6667 29.6106 16.6667 26.6666V21.3333H11.3333C8.38933 21.3333 6 23.7226 6 26.6666C6 29.6106 8.38933 32 11.3333 32Z\" fill=\"#0ACF83\"/><path d=\"M6 16C6 13.056 8.38933 10.6666 11.3333 10.6666H16.6667V21.3333H11.3333C8.38933 21.3333 6 18.944 6 16Z\" fill=\"#A259FF\"/><path d=\"M6 5.33333C6 2.38933 8.38933 0 11.3333 0H16.6667V10.6667H11.3333C8.38933 10.6667 6 8.27733 6 5.33333Z\" fill=\"#F24E1E\"/><path d=\"M16.6667 0H22C24.944 0 27.3333 2.38933 27.3333 5.33333C27.3333 8.27733 24.944 10.6667 22 10.6667H16.6667V0Z\" fill=\"#FF7262\"/><path d=\"M27.3333 16C27.3333 18.944 24.944 21.3333 22 21.3333C19.056 21.3333 16.6667 18.944 16.6667 16C16.6667 13.056 19.056 10.6666 22 10.6666C24.944 10.6666 27.3333 13.056 27.3333 16Z\" fill=\"#1ABCFE\"/></svg>"}'>Figma</option>
                              <option data-hs-select-option='{"icon": "<svg class=\"size-4 shrink-0\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\"><path d=\"M11.73 0a3.2 3.2 0 0 0-3.2 3.2 3.2 3.2 0 0 0 3.2 3.2h3.2V3.2A3.2 3.2 0 0 0 11.73 0ZM11.73 8.53H3.2A3.2 3.2 0 0 0 0 11.73a3.2 3.2 0 0 0 3.2 3.2h8.53a3.2 3.2 0 0 0 0-6.4Z\" fill=\"#36C5F0\"/><path d=\"M32 11.73a3.2 3.2 0 0 0-6.4 0v3.2h3.2a3.2 3.2 0 0 0 3.2-3.2ZM23.47 11.73V3.2a3.2 3.2 0 0 0-6.4 0v8.53a3.2 3.2 0 0 0 6.4 0Z\" fill=\"#2EB67D\"/><path d=\"M20.27 32a3.2 3.2 0 0 0 3.2-3.2 3.2 3.2 0 0 0-3.2-3.2h-3.2v3.2a3.2 3.2 0 0 0 3.2 3.2ZM20.27 23.47h8.53a3.2 3.2 0 0 0 0-6.4h-8.53a3.2 3.2 0 0 0 0 6.4Z\" fill=\"#ECB22E\"/><path d=\"M0 20.27a3.2 3.2 0 0 0 6.4 0v-3.2H3.2a3.2 3.2 0 0 0-3.2 3.2ZM8.53 20.27v8.53a3.2 3.2 0 0 0 6.4 0v-8.53a3.2 3.2 0 0 0-6.4 0Z\" fill=\"#E01E5A\"/></svg>"}'>Slack</option>
                              <option data-hs-select-option='{"icon": "<span class=\"shrink-0 size-4 flex justify-center items-center text-[10px] font-bold tracking-tight text-[#14a800]\" aria-hidden=\"true\">up</span>"}'>Upwork</option>
                              <option data-hs-select-option='{"icon": "<span class=\"shrink-0 size-4 flex justify-center items-center bg-surface text-surface-foreground text-[10px] font-medium uppercase rounded-full\" aria-hidden=\"true\">M</span>"}'>Mailchimp</option>
                              <option data-hs-select-option='{"icon": "<span class=\"shrink-0 size-4 flex justify-center items-center bg-surface text-surface-foreground text-[10px] font-medium uppercase rounded-full\" aria-hidden=\"true\">L</span>"}'>Linear</option>
                              <option data-hs-select-option='{"icon": "<span class=\"shrink-0 size-4 flex justify-center items-center bg-surface text-surface-foreground text-[10px] font-medium uppercase rounded-full\" aria-hidden=\"true\">V</span>"}'>Vercel</option>
                              <option data-hs-select-option='{"icon": "<span class=\"shrink-0 size-4 flex justify-center items-center bg-surface text-surface-foreground text-[10px] font-medium uppercase rounded-full\" aria-hidden=\"true\">G</span>"}'>Gumroad</option>
                              <option data-hs-select-option='{"icon": "<span class=\"shrink-0 size-4 flex justify-center items-center bg-surface text-surface-foreground text-[10px] font-medium uppercase rounded-full\" aria-hidden=\"true\">C</span>"}'>Contra</option>
                              <option data-hs-select-option='{"icon": "<span class=\"shrink-0 size-4 flex justify-center items-center bg-surface text-surface-foreground text-[10px] font-medium uppercase rounded-full\" aria-hidden=\"true\">P</span>"}'>Patreon</option>
                          </select>
                        </div>
                      </div>
                      
                    </div>

Open related finance tracker template

Avatar Radio Group With Check Badge New Pro

Row of avatar radios where the selected person is marked with a check badge.

Create a responsive UI block named "Avatar Radio Group With Check Badge" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/option-pickers/#avatar-radio-group-with-check-badge. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/option-pickers
- Block ID: avatar-radio-group-with-check-badge
- Source description: Row of avatar radios where the selected person is marked with a check badge.
- Preview iframe: https://preline.co/blocks/forms/option-pickers/iframes/pro/avatar-radio-group-with-check-badge.html (repo path: blocks/forms/option-pickers/iframes/pro/avatar-radio-group-with-check-badge.html)
- Source markup reference:
  - partials/pro/finance-tracker/sources/payer-select.html

<div class="min-h-14 px-4 flex justify-between items-center gap-x-3">
                      <span id="hs-pro-argcb-payer-label" class="shrink-0 text-sm text-muted-foreground-1">
                        Paid by
                      </span>

<div role="radiogroup" aria-labelledby="hs-pro-argcb-payer-label" class="grow flex flex-wrap justify-end items-center gap-3">
                        
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-argcb-payer-alex" class="relative block rounded-full cursor-pointer">
                            <span class="sr-only">Alex Morgan</span>
                            <img class="hs-tooltip-toggle shrink-0 size-8 bg-layer border border-layer-line rounded-full" src="../../../assets/img/mcp/jordan-lee-avatar.jpg" width="32" height="32" alt=""><span class="block absolute -top-0.5 -inset-e-0.5 bg-layer rounded-full">
                              <span class="relative flex flex-col justify-center items-center size-4 bg-surface border-2 border-layer text-surface-foreground rounded-full has-checked:text-primary-foreground">
                                <input type="radio" id="hs-pro-argcb-payer-alex" name="hs-pro-argcb-payer" value="alex" class="absolute top-0 inset-s-0 size-full bg-transparent border-transparent checked:bg-primary-checked checked:bg-none focus:ring-0 focus:ring-offset-0 rounded-full focus:outline-hidden" checked>
                                <svg class="relative shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
                              </svg>
                              </span>
                            </span>
                          </label>

<span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-90 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                            Alex Morgan
                          </span>
                        </div>

<div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-argcb-payer-priya" class="relative block rounded-full cursor-pointer">
                            <span class="sr-only">Priya Shah</span>
                            <span class="hs-tooltip-toggle flex shrink-0 justify-center items-center size-8 bg-layer border border-layer-line text-layer-foreground text-sm font-medium uppercase rounded-full">P</span><span class="block absolute -top-0.5 -inset-e-0.5 bg-layer rounded-full">
                              <span class="relative flex flex-col justify-center items-center size-4 bg-surface border-2 border-layer text-surface-foreground rounded-full has-checked:text-primary-foreground">
                                <input type="radio" id="hs-pro-argcb-payer-priya" name="hs-pro-argcb-payer" value="priya" class="absolute top-0 inset-s-0 size-full bg-transparent border-transparent checked:bg-primary-checked checked:bg-none focus:ring-0 focus:ring-offset-0 rounded-full focus:outline-hidden">
                                <svg class="relative shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
                              </svg>
                              </span>
                            </span>
                          </label>

<span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-90 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                            Priya Shah
                          </span>
                        </div>

<div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-argcb-payer-marco" class="relative block rounded-full cursor-pointer">
                            <span class="sr-only">Marco Silva</span>
                            <span class="hs-tooltip-toggle flex shrink-0 justify-center items-center size-8 bg-layer border border-layer-line text-layer-foreground text-sm font-medium uppercase rounded-full">M</span><span class="block absolute -top-0.5 -inset-e-0.5 bg-layer rounded-full">
                              <span class="relative flex flex-col justify-center items-center size-4 bg-surface border-2 border-layer text-surface-foreground rounded-full has-checked:text-primary-foreground">
                                <input type="radio" id="hs-pro-argcb-payer-marco" name="hs-pro-argcb-payer" value="marco" class="absolute top-0 inset-s-0 size-full bg-transparent border-transparent checked:bg-primary-checked checked:bg-none focus:ring-0 focus:ring-offset-0 rounded-full focus:outline-hidden">
                                <svg class="relative shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
                              </svg>
                              </span>
                            </span>
                          </label>

<span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-90 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                            Marco Silva
                          </span>
                        </div>

<span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-90 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                            Invite someone else
                          </span>
                        </div>
                      </div>
                    </div>

Open related finance tracker template

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

Create a responsive UI block named "Navigation Appearance Picker" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/option-pickers/#navigation-appearance-picker. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/option-pickers
- Block ID: navigation-appearance-picker
- Source description: Compact icon grid presents multiple navigation options as evenly sized selectable tiles.
- Preview iframe: https://preline.co/blocks/forms/option-pickers/iframes/pro/navigation-appearance-picker.html (repo path: blocks/forms/option-pickers/iframes/pro/navigation-appearance-picker.html)
- Source markup reference:
  - partials/pro/video-call/radio-and-checkbox/soft-gray-grid-view.html
  - partials/pro/video-call/radio-and-checkbox/soft-gray.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
  - Exactly 8 tiles in `<div class="grid grid-cols-3 sm:grid-cols-4 gap-2">` - 3 columns on mobile, 4 from `sm` up - in this order: `Home`, `Meetings`, `Schedule`, `Settings`, `Livestreaming`, `Recordings`, `Whiteboard`, `Integrations`. There is no heading, description, or save/cancel footer.
  - First-load state matters: `Home`, `Meetings`, `Schedule`, and `Settings` are checked; `Livestreaming`, `Recordings`, `Whiteboard`, and `Integrations` are unchecked.
  - `Home` and `Meetings` are additionally `disabled` (locked-on items) - they render checked but greyed via `peer-disabled:opacity-50 peer-disabled:pointer-events-none`. The other six are freely toggleable.
  - Controls are `type="checkbox"` sharing the group name `hs-pro-vcsnbaich` with ids `hs-pro-vcsnbaich1` through `hs-pro-vcsnbaich8`; each input is `class="hidden peer"` with `value` equal to its visible title.
  - Each tile is a fixed `size-28` square: `flex flex-col justify-center items-center gap-y-1 text-xs rounded-lg hover:bg-surface-hover`, and each grid cell wraps it in `flex justify-center items-center`. Keep the fixed 28-unit square rather than letting tiles stretch.
  - The icon sits in a `size-9` badge with `bg-surface rounded-md`, flipping to `peer-checked:bg-primary-checked peer-checked:text-primary-foreground` when selected; the icon itself is a `size-4` outline SVG at `stroke-width="2"` and the title text sits beneath it. Only the badge changes color on check - the tile background and text do not.
  - `Meetings` and `Recordings` intentionally use the same video-camera icon; icons in order are house, video, calendar-clock, gear, radio waves, video, presentation board, and globe-network.
  - Fully CSS-driven; no Preline JS plugins and no `data-hs-*` attributes.

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

Create a responsive UI block named "Theme Appearance Picker" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/option-pickers/#theme-appearance-picker. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/option-pickers
- Block ID: theme-appearance-picker
- Source description: Small segmented picker offers appearance modes with one card-style tile per option.
- Preview iframe: https://preline.co/blocks/forms/option-pickers/iframes/pro/theme-appearance-picker.html (repo path: blocks/forms/option-pickers/iframes/pro/theme-appearance-picker.html)
- Source markup reference:
  - partials/pro/video-call/radio-and-checkbox/appearance-grid-view.html

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

Create a responsive UI block named "Badge Icon Option Buttons" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/option-pickers/#badge-icon-option-buttons. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/option-pickers
- Block ID: badge-icon-option-buttons
- Source description: Pill-shaped toggle buttons combine icons and labels for a compact multi-option selector.
- Preview iframe: https://preline.co/blocks/forms/option-pickers/iframes/pro/badge-icon-option-buttons.html (repo path: blocks/forms/option-pickers/iframes/pro/badge-icon-option-buttons.html)
- Source markup reference:
  - partials/pro/payments-dashboard/radio-and-checkbox/badge-style-button-with-icon-grid-view.html
  - partials/pro/payments-dashboard/radio-and-checkbox/badge-style-button-with-icon.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
  - Exactly 10 options in a single `<div class="flex flex-wrap gap-2">`, in this exact order: `Transfers`, `Cash withdrawal`, `Card transactions`, `Direct debits`, `Batch transfers`, `Money added`, `Prefunding transfers`, `Auto conversions`, `Conversions`, `Asset fees`. Note `Auto conversions` precedes `Conversions`. There is no heading, helper text, or Clear/Apply footer.
  - Each option is `type="checkbox"` (multi-select, not radio) sharing the group name `hs-pro-pytfmty`, with sequential ids `hs-pro-pytfmty-1` through `hs-pro-pytfmty-10`. None is checked or disabled on first load.
  - Each control is a `<label>` wrapping a visually hidden `<input class="hidden peer">`; the label is `py-2 px-2.5 text-[13px] rounded-xl bg-layer border border-layer-line ring-1 ring-transparent` - keep the `rounded-xl` radius and the 13px font size rather than substituting `text-sm`.
  - The check indicator is the distinctive piece: a `size-0` circle that animates to `peer-checked:size-4 peer-checked:me-1.5` with `transition-all duration-200`, holding a `size-2.5` check icon at `stroke-width="4"`. Unchecked it occupies zero width, so the pill grows when selected.
  - Checked styling is token-driven, not a solid primary fill: `has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800` with dark-mode counterparts at `primary-800/30` and `primary-500`.
  - Fully CSS-driven; no Preline JS plugins and no `data-hs-*` attributes. Selection state comes only from the native checkbox plus `peer-checked`/`has-checked` variants.

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

Create a responsive UI block named "Centered Icon Checkboxes" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/option-pickers/#centered-icon-checkboxes. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/option-pickers
- Block ID: centered-icon-checkboxes
- Source description: Centered three-column grid uses large checkbox cards with icons and labels for each choice.
- Preview iframe: https://preline.co/blocks/forms/option-pickers/iframes/pro/centered-icon-checkboxes.html (repo path: blocks/forms/option-pickers/iframes/pro/centered-icon-checkboxes.html)
- Source markup reference:
  - partials/pro/storefront/radio-and-checkbox/center-aligned-checkbox-icons.html
  - partials/pro/storefront/radio-and-checkbox/with-icons.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
  - One heading above the grid reading `Your interests`, styled `mb-4 font-medium text-foreground` - it is an `<h2>`, not a form legend, and there is no subheading or helper text.
  - Exactly 8 tiles in `<div class="grid grid-cols-3 sm:grid-cols-4 gap-3">` - 3 columns on mobile, 4 from `sm` up - in this order: `Gaming`, `Golf`, `Fitness`, `Skiing`, `Biking`, `Sailing`, `Climbing`, `Hiking`.
  - Three tiles are checked on first load: `Fitness`, `Biking`, and `Hiking`. The other five are unchecked; none is disabled.
  - Controls are `type="checkbox"` (multi-select) sharing the group name `hs-pro-shenli` with ids `hs-pro-shenli1` through `hs-pro-shenli8`; each input has `value` equal to its visible title and is `class="hidden"` inside its `<label>`.
  - Each tile is `p-2 sm:p-3 text-xs sm:text-[13px] flex flex-col justify-center items-center text-center rounded-lg bg-layer border border-layer-line`; the icon is a `size-6 mx-auto` outline SVG at `stroke-width="1.5"` and the caption sits below it in a `<span class="block mt-2">`.
  - Selected styling is border-and-ring only, no fill change: `has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked`. Do not add a checkmark badge, background tint, or scale effect.
  - Fully CSS-driven; no Preline JS plugins and no `data-hs-*` attributes. Icons are Lucide-style line icons (gamepad, golf, dumbbell, tram/gondola, bike, sailboat, mountain, hiking).

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

Create a responsive UI block named "Size Option Picker" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/option-pickers/#size-option-picker. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/option-pickers
- Block ID: size-option-picker
- Source description: Dense size grid pairs one heading row with evenly spaced radio options for each size.
- Preview iframe: https://preline.co/blocks/forms/option-pickers/iframes/pro/size-option-picker.html (repo path: blocks/forms/option-pickers/iframes/pro/size-option-picker.html)
- Source markup reference:
  - partials/pro/storefront/radio-and-checkbox/size.html
  - partials/pro/storefront/radio-and-checkbox/size-selector.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
  - One heading only: an `<h2 class="font-medium text-foreground">` reading `Size`, inside a `flex flex-wrap justify-between items-center gap-3` row. This variant does not render the optional `Size guide` link/modal trigger, so there is no `data-hs-overlay` button and no HSOverlay wiring anywhere in the block.
  - Exactly 12 size tiles in `<div class="mt-2 grid grid-cols-4 gap-2">` - always 4 columns, no responsive change - in this order: `6.5`, `7`, `7.5`, `8`, `8.5`, `9`, `9.5`, `10`, `10.5`, `11`, `11.5`, `12`.
  - Five sizes are `disabled` (out of stock): `7.5`, `8.5`, `9`, `10`, and `11`. The other seven are selectable, and no size is checked on first load.
  - Controls are `type="radio"` (single-select) sharing the group name `hs-pro-shfdsr`, with ids like `hs-pro-shfdsr-us-6and5`, `hs-pro-shfdsr-us-7`, `hs-pro-shfdsr-us-10and5` - half sizes spell the decimal as `and5`.
  - Each tile is `p-2.5 group relative flex justify-center items-center text-center text-xs border border-layer-line rounded-lg` with a hidden input; the label text is the bare number, with no "US" prefix or unit suffix.
  - Disabled tiles get a diagonal strike drawn with a CSS gradient pseudo-element, not an SVG or a line element: `has-disabled:after:absolute has-disabled:after:inset-0` plus a `linear-gradient(to right bottom, ...)` using `var(--color-line-2)`, alongside `has-disabled:opacity-70` and `has-disabled:pointer-events-none`. Preserve that strike-through treatment.
  - Selected styling is `has-checked:text-primary-checked has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked` - outline and text color only, no filled background.
  - Fully CSS-driven; no Preline JS plugins and no `data-hs-*` attributes in this variant.

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

Create a responsive UI block named "Color Options with Counts" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/option-pickers/#color-options-with-counts. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/option-pickers
- Block ID: color-options-with-counts
- Source description: Vertical filter list combines color checkboxes with right-aligned result counts on each row.
- Preview iframe: https://preline.co/blocks/forms/option-pickers/iframes/pro/color-options-with-counts.html (repo path: blocks/forms/option-pickers/iframes/pro/color-options-with-counts.html)
- Source markup reference:
  - partials/pro/storefront/forms/filter-color.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
  - Exactly 8 rows in a `<div class="space-y-0.5">`, in this order with these exact counts: `Black` `(70)`, `White` `(127)`, `Gray` `(63)`, `Red` `(32)`, `Orange` `(25)`, `Yellow` `(15)`, `Green` `(12)`, `Blue` `(86)`. Counts are rendered with literal parentheses. There is no section heading, search field, or "Show more" link.
  - Each row is a full-width `<label class="p-2 group w-full inline-flex items-center cursor-pointer text-sm rounded-lg hover:bg-muted-hover">` containing a real `<input type="checkbox">`, the color name in `ms-2 text-foreground`, and the count pushed right with `ms-auto text-xs text-muted-foreground-1`.
  - Checkboxes are multi-select and none is checked on first load; ids are `hs-pro-shflocss-black` for Black and `hs-pro-shfloc-<color>` for the rest (note the extra `ss` in the Black id only).
  - Each checkbox is `size-4.5 rounded-sm` and is tinted to its own color rather than the primary token: `bg-red-500 border-red-500 checked:text-red-500` and the same pattern for orange, yellow, green, and blue; Black uses `bg-inverse border-black checked:text-black` and Gray uses `bg-surface-2 border-line-3 checked:text-line-3`. These literal color utilities are intentional swatch content, not primary roles to remap.
  - The `White` row is special-cased: its input uses `bg-plain checked:bg-none` so no built-in tick shows, and a sibling `size-4.5 -ms-4.5 fill-black` SVG check is overlaid, revealed by `group-has-checked:opacity-100`. Keep that overlay so the tick stays visible on a white swatch.
  - The iframe frames the list as `w-full max-w-xs mx-auto bg-layer p-4`; every checkbox also carries `focus:ring-0 focus:ring-offset-0` and `disabled:opacity-50 disabled:pointer-events-none`.
  - Fully static; no Preline JS plugins and no `data-hs-*` attributes - the counts do not update on selection.

<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.5 -ms-4.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.

Create a responsive UI block named "Centered Icon Radio Options" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/option-pickers/#centered-icon-radio-options. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/option-pickers
- Block ID: centered-icon-radio-options
- Source description: Three-column radio grid centers large icons and labels inside mutually exclusive option cards.
- Preview iframe: https://preline.co/blocks/forms/option-pickers/iframes/pro/centered-icon-radio-options.html (repo path: blocks/forms/option-pickers/iframes/pro/centered-icon-radio-options.html)
- Source markup reference:
  - partials/pro/storefront/radio-and-checkbox/center-aligned-radio-icons.html
  - partials/pro/storefront/radio-and-checkbox/with-icons.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
  - Exactly 3 tiles in `<div class="grid grid-cols-3 gap-3">` - three columns at every breakpoint, no responsive column change - in this order: `Preline Website`, `Customer Service`, `Our Store`. There is no heading, legend, or helper text above or below the grid.
  - Controls are `type="radio"` (single-select) sharing the group name `hs-pro-shwrvtgri` with ids `hs-pro-shwrvtgri1` through `hs-pro-shwrvtgri3`; each input is `class="hidden"` inside its `<label>`.
  - No option is checked on first load - the group starts entirely unselected, so do not preselect the first tile.
  - Each tile is `p-2 sm:p-3 text-xs sm:text-[13px] flex flex-col justify-center items-center text-center rounded-lg bg-layer border border-layer-line`; the icon is `size-7 mx-auto` (larger than the checkbox sibling's `size-6`) at `stroke-width="1.5"`, with the caption in a `<span class="block mt-2">`.
  - Icons in order are a browser/monitor window with three dots, a headset, and a map-pin over a shopping-bag base - matching website, support, and physical store.
  - Selected styling is border-and-ring only, no fill change: `has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked`. Do not add a radio dot, checkmark, or background tint.
  - Fully CSS-driven; no Preline JS plugins and no `data-hs-*` attributes.

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

Create a responsive UI block named "Color Swatch Picker" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/option-pickers/#color-swatch-picker. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/option-pickers
- Block ID: color-swatch-picker
- Source description: Minimal swatch row presents color choices as small selectable blocks with a current label below.
- Preview iframe: https://preline.co/blocks/forms/option-pickers/iframes/pro/color-swatch-picker.html (repo path: blocks/forms/option-pickers/iframes/pro/color-swatch-picker.html)
- Source markup reference:
  - partials/pro/storefront/radio-and-checkbox/colors.html
  - partials/pro/storefront/radio-and-checkbox/simple-with-ring.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
  - Three text/layout parts in order: an `<h2 class="font-medium text-foreground">` reading `Color`, the swatch row, then a caption `<p class="mt-2 text-xs text-muted-foreground-1">` reading `Light Grey` naming the currently selected swatch.
  - Exactly 3 swatches in `<div class="mt-2 flex flex-wrap gap-3">`, in this order: a dark/inverse swatch (`bg-inverse`), a white swatch (`bg-plain border border-line-2`), and a light-grey swatch (`bg-surface-2`). No swatch has a text label of its own.
  - The controls are `type="radio"` (single-select) sharing the group name `hs-pro-shgctn`; ids are `hs-pro-shgctn1`, `hs-pro-shgctn2`, and `hs-pro-shgctn4` - the sequence intentionally skips 3.
  - The third swatch (light grey) is `checked` on first load, which is why the caption reads `Light Grey`; the other two start unselected.
  - Each swatch is `size-7 rounded-md` on both the `<label>` and the inner `<span>`, with the input `class="hidden"` inside the label. The white swatch is the only one with a border, so it stays visible against a light background.
  - Selected state is a double ring, not a checkmark: `has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked has-checked:border-primary-checked`. Do not add a tick, dot, or scale change.
  - Fully CSS-driven; no Preline JS plugins and no `data-hs-*` attributes. The caption is static text - it does not update when a different swatch is picked.

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

Create a responsive UI block named "Split Selector with Options" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/option-pickers/#split-selector-with-options. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/option-pickers
- Block ID: split-selector-with-options
- Source description: Split selector combines a primary choice toggle with a dropdown list of secondary options.
- Preview iframe: https://preline.co/blocks/forms/option-pickers/iframes/pro/split-selector-with-options.html (repo path: blocks/forms/option-pickers/iframes/pro/split-selector-with-options.html)
- Source markup reference:
  - partials/pro/admin-dashboard/cards/dropdown-button-with-select-options.html
  - partials/pro/admin-dashboard/sources/dropdown-button-with-select-options.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
  - Despite the source partial name, the block renders as an always-visible panel, not an open dropdown: a fixed-width `w-60 mx-auto bg-card border border-card-line rounded-xl shadow-2xs` card with an inner `p-1`. There is no trigger button, no `hs-dropdown` wrapper, and no HSDropdown wiring - do not add one.
  - Header block reads `Download Report` in `block font-semibold text-foreground` with the sub-line `Select Options` in `block text-xs text-muted-foreground-1`, inside `py-2 px-3`.
  - The segmented control has exactly 2 segments in a `flex items-center bg-surface rounded-xl p-1` track: `Excel` then `Word`. They are `type="radio"` inputs sharing the name `hs-pro-dbrrtchddts` with ids `hs-pro-dbrrtchddts1` and `hs-pro-dbrrtchddts2`; `Excel` is checked on first load and neither is disabled.
  - Each segment label is `relative py-1.5 px-3 w-full text-center text-sm rounded-lg has-checked:bg-layer has-checked:shadow-2xs` - the selected pill gets a raised layer background, not a primary fill.
  - The `Excel` and `Word` icons are full-color Microsoft brand SVGs on a `32 32` viewBox rendered at `size-4` (Excel greens `#21A366`/`#107C41`/`#33C481`/`#185C37`, Word blues `#41A5EE`/`#2B7CD3`/`#185ABD`/`#103F91`). They are brand assets, not remappable outline icons; each sits inside the label with `me-1.5 inline-block align-middle`.
  - Exactly 3 checkbox rows follow, in this order with `size-4` outline icons on the left: `Section name` (pencil), `Comparison stats` (file-pie-chart), `Legend indicator` (circle). All three are checked on first load, none is disabled, ids run `hs-pro-dbrrtchdds1` through `hs-pro-dbrrtchdds3`, and each row puts the label left (`flex flex-1 items-center gap-x-3 text-sm`) with the checkbox on the far right - not the usual checkbox-first order.
  - The footer is one full-width primary button reading `Download`; three `border-t border-dropdown-divider` rules separate header/segments, segments/checkboxes, and checkboxes/button.
  - Fully static apart from native inputs: no Preline JS plugins and no `data-hs-*` attributes.

<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