Select Modal

Ionic-style select that opens a modal with radio or checkbox options. Combines the trigger (styled like a select) with a modal overlay containing option items. Reuses existing .modal, .radio, .checkbox, and .btn components.

Single Select (Radios)

Preview

<div x-data="{ open: false, selected: '' }">
  <button class="select-modal" @click="open = true">
    <span class="select-modal-placeholder" x-show="!selected">Select framework...</span>
    <span class="select-modal-value" x-show="selected" x-text="selected"></span>
  </button>

  <div class="modal-backdrop" :data-state="open ? 'open' : 'closed'" @click.self="open = false">
    <div class="modal modal-sm">
      <div class="modal-header">
        <h3 class="modal-title">Select Framework</h3>
        <button class="modal-close" @click="open = false">&times;</button>
      </div>
      <div class="modal-body p-0">
        <label class="select-modal-option" :class="selected === 'React' && 'select-modal-option-selected'">
          <input type="radio" name="fw" class="radio-input" value="React" x-model="selected">
          <span class="radio-circle"><span class="radio-dot"></span></span>
          <span class="select-modal-option-label">React</span>
        </label>
        <label class="select-modal-option" :class="selected === 'Vue' && 'select-modal-option-selected'">
          <input type="radio" name="fw" class="radio-input" value="Vue" x-model="selected">
          <span class="radio-circle"><span class="radio-dot"></span></span>
          <span class="select-modal-option-label">Vue</span>
        </label>
        <label class="select-modal-option" :class="selected === 'Svelte' && 'select-modal-option-selected'">
          <input type="radio" name="fw" class="radio-input" value="Svelte" x-model="selected">
          <span class="radio-circle"><span class="radio-dot"></span></span>
          <span class="select-modal-option-label">Svelte</span>
        </label>
        <label class="select-modal-option" :class="selected === 'Astro' && 'select-modal-option-selected'">
          <input type="radio" name="fw" class="radio-input" value="Astro" x-model="selected">
          <span class="radio-circle"><span class="radio-dot"></span></span>
          <span class="select-modal-option-label">Astro</span>
        </label>
      </div>
      <div class="modal-footer">
        <button class="btn btn-ghost btn-sm" @click="selected = ''; open = false">Cancel</button>
        <button class="btn btn-sm color-primary" @click="open = false">OK</button>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Trigger -->
<button class="select-modal" @click="open = true">
  <span class="select-modal-placeholder">Select framework...</span>
</button>

<!-- Modal with radio options -->
<label class="select-modal-option">
  <input type="radio" name="fw" class="radio-input" value="React" x-model="selected">
  <span class="radio-circle"><span class="radio-dot"></span></span>
  <span class="select-modal-option-label">React</span>
</label>

Requires: tw.min.css

// x-model on radio inputs handles selection automatically
// The label click propagates to the radio natively
// No manual @click needed — x-model keeps state in sync

Multiple Select (Checkboxes)

Preview

<div x-data="{ open: false, selected: [] }">
  <button class="select-modal" @click="open = true">
    <span class="select-modal-placeholder" x-show="selected.length === 0">Select fruits...</span>
    <span class="select-modal-value" x-show="selected.length > 0" x-text="selected.join(', ')"></span>
  </button>

  <div class="modal-backdrop" :data-state="open ? 'open' : 'closed'" @click.self="open = false">
    <div class="modal modal-sm">
      <div class="modal-header">
        <h3 class="modal-title">Select Fruits</h3>
        <button class="modal-close" @click="open = false">&times;</button>
      </div>
      <div class="modal-body p-0">
        <label class="select-modal-option" :class="selected.includes('Apple') && 'select-modal-option-selected'">
          <input type="checkbox" class="checkbox-input" value="Apple" x-model="selected">
          <span class="checkbox-box"><svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
          <span class="select-modal-option-label">Apple</span>
        </label>
        <label class="select-modal-option" :class="selected.includes('Banana') && 'select-modal-option-selected'">
          <input type="checkbox" class="checkbox-input" value="Banana" x-model="selected">
          <span class="checkbox-box"><svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
          <span class="select-modal-option-label">Banana</span>
        </label>
        <label class="select-modal-option" :class="selected.includes('Cherry') && 'select-modal-option-selected'">
          <input type="checkbox" class="checkbox-input" value="Cherry" x-model="selected">
          <span class="checkbox-box"><svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
          <span class="select-modal-option-label">Cherry</span>
        </label>
        <label class="select-modal-option" :class="selected.includes('Mango') && 'select-modal-option-selected'">
          <input type="checkbox" class="checkbox-input" value="Mango" x-model="selected">
          <span class="checkbox-box"><svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
          <span class="select-modal-option-label">Mango</span>
        </label>
        <label class="select-modal-option" :class="selected.includes('Orange') && 'select-modal-option-selected'">
          <input type="checkbox" class="checkbox-input" value="Orange" x-model="selected">
          <span class="checkbox-box"><svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
          <span class="select-modal-option-label">Orange</span>
        </label>
      </div>
      <div class="modal-footer">
        <button class="btn btn-ghost btn-sm" @click="selected = []; open = false">Cancel</button>
        <button class="btn btn-sm color-primary" @click="open = false">OK</button>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Checkbox option with x-model array binding -->
<label class="select-modal-option">
  <input type="checkbox" class="checkbox-input" value="Apple" x-model="selected">
  <span class="checkbox-box">
    <svg class="checkbox-mark" viewBox="0 0 24 24" fill="none"
      stroke="currentColor" stroke-width="3" stroke-linecap="round"
      stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="select-modal-option-label">Apple</span>
</label>

Requires: tw.min.css

// x-model on checkboxes with array binding
// Alpine automatically adds/removes values from the array
// The label propagates clicks to the checkbox natively

Options with Descriptions

Preview

<div x-data="{ open: false, selected: 'standard' }">
  <button class="select-modal" @click="open = true">
    <span class="select-modal-value" x-text="selected === 'standard' ? 'Standard Shipping' : selected === 'express' ? 'Express Shipping' : 'Overnight'"></span>
  </button>

  <div class="modal-backdrop" :data-state="open ? 'open' : 'closed'" @click.self="open = false">
    <div class="modal modal-sm">
      <div class="modal-header">
        <h3 class="modal-title">Shipping Method</h3>
        <button class="modal-close" @click="open = false">&times;</button>
      </div>
      <div class="modal-body p-0">
        <label class="select-modal-option" :class="selected === 'standard' && 'select-modal-option-selected'">
          <input type="radio" name="ship" class="radio-input" value="standard" x-model="selected">
          <span class="radio-circle"><span class="radio-dot"></span></span>
          <span class="select-modal-option-text">
            <span class="select-modal-option-label">Standard Shipping</span>
            <span class="select-modal-option-description">5-7 business days &bull; Free</span>
          </span>
        </label>
        <label class="select-modal-option" :class="selected === 'express' && 'select-modal-option-selected'">
          <input type="radio" name="ship" class="radio-input" value="express" x-model="selected">
          <span class="radio-circle"><span class="radio-dot"></span></span>
          <span class="select-modal-option-text">
            <span class="select-modal-option-label">Express Shipping</span>
            <span class="select-modal-option-description">2-3 business days &bull; $9.99</span>
          </span>
        </label>
        <label class="select-modal-option" :class="selected === 'overnight' && 'select-modal-option-selected'">
          <input type="radio" name="ship" class="radio-input" value="overnight" x-model="selected">
          <span class="radio-circle"><span class="radio-dot"></span></span>
          <span class="select-modal-option-text">
            <span class="select-modal-option-label">Overnight</span>
            <span class="select-modal-option-description">Next business day &bull; $24.99</span>
          </span>
        </label>
      </div>
      <div class="modal-footer">
        <button class="btn btn-ghost btn-sm" @click="open = false">Cancel</button>
        <button class="btn btn-sm color-primary" @click="open = false">OK</button>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Wrap label + description in .select-modal-option-text -->
<label class="select-modal-option">
  <input type="radio" name="ship" class="radio-input" value="express" x-model="selected">
  <span class="radio-circle"><span class="radio-dot"></span></span>
  <span class="select-modal-option-text">
    <span class="select-modal-option-label">Express Shipping</span>
    <span class="select-modal-option-description">2-3 business days &bull; $9.99</span>
  </span>
</label>

Requires: tw.min.css

// .select-modal-option-text wraps label + description
// .select-modal-option-label: primary text
// .select-modal-option-description: secondary dimmed text

Checkmark Style (no radio/checkbox widget)

Preview

<div x-data="{ open: false, selected: 'dark' }">
  <button class="select-modal" @click="open = true">
    <span class="select-modal-value" x-text="selected.charAt(0).toUpperCase() + selected.slice(1)"></span>
  </button>

  <div class="modal-backdrop" :data-state="open ? 'open' : 'closed'" @click.self="open = false">
    <div class="modal modal-sm">
      <div class="modal-header">
        <h3 class="modal-title">Theme</h3>
        <button class="modal-close" @click="open = false">&times;</button>
      </div>
      <div class="modal-body p-0">
        <div class="select-modal-option" :class="selected === 'light' && 'select-modal-option-selected'" @click="selected = 'light'">
          <span class="select-modal-option-label">Light</span>
          <svg class="select-modal-option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"></polyline></svg>
        </div>
        <div class="select-modal-option" :class="selected === 'dark' && 'select-modal-option-selected'" @click="selected = 'dark'">
          <span class="select-modal-option-label">Dark</span>
          <svg class="select-modal-option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"></polyline></svg>
        </div>
        <div class="select-modal-option" :class="selected === 'system' && 'select-modal-option-selected'" @click="selected = 'system'">
          <span class="select-modal-option-label">System</span>
          <svg class="select-modal-option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"></polyline></svg>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-sm color-primary" @click="open = false">Done</button>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- No radio/checkbox — just a check SVG per option -->
<div class="select-modal-option" :class="selected === 'dark' && 'select-modal-option-selected'" @click="selected = 'dark'">
  <span class="select-modal-option-label">Dark</span>
  <svg class="select-modal-option-check" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>

Requires: tw.min.css

// .select-modal-option-check is hidden (opacity-0) by default
// When .select-modal-option-selected is added, the check shows (opacity-100)
// No radio/checkbox inputs — just @click to toggle

With Search

Preview

<div x-data="{ open: false, selected: '', search: '' }">
  <button class="select-modal" @click="open = true">
    <span class="select-modal-placeholder" x-show="!selected">Select country...</span>
    <span class="select-modal-value" x-show="selected" x-text="selected"></span>
  </button>

  <div class="modal-backdrop" :data-state="open ? 'open' : 'closed'" @click.self="open = false">
    <div class="modal modal-sm">
      <div class="modal-header">
        <h3 class="modal-title">Select Country</h3>
        <button class="modal-close" @click="open = false">&times;</button>
      </div>
      <div class="modal-body p-0">
        <div class="select-modal-search">
          <input type="text" class="input input-sm w-full" placeholder="Search..." x-model="search">
        </div>
        <template x-for="c in ['Argentina', 'Australia', 'Brazil', 'Canada', 'France', 'Germany', 'Italy', 'Japan', 'Mexico', 'Spain', 'UK', 'USA'].filter(c => c.toLowerCase().includes(search.toLowerCase()))" :key="c">
          <label class="select-modal-option" :class="selected === c && 'select-modal-option-selected'">
            <input type="radio" name="country" class="radio-input" :value="c" x-model="selected">
            <span class="radio-circle"><span class="radio-dot"></span></span>
            <span class="select-modal-option-label" x-text="c"></span>
          </label>
        </template>
      </div>
      <div class="modal-footer">
        <button class="btn btn-ghost btn-sm" @click="selected = ''; open = false">Cancel</button>
        <button class="btn btn-sm color-primary" @click="open = false">OK</button>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- .select-modal-search sticks to the top of the scrollable area -->
<div class="select-modal-search">
  <input type="text" class="input input-sm w-full" placeholder="Search..." x-model="search">
</div>

Requires: tw.min.css

// x-model on search input filters the options list
// x-for with .filter() renders only matching items
// x-model on radios handles selection

Tags in Trigger (Multi-select)

Preview

<div x-data="{ open: false, selected: ['React', 'Vue'] }">
  <button class="select-modal" @click="open = true">
    <span class="select-modal-placeholder" x-show="selected.length === 0">Select technologies...</span>
    <span class="select-modal-tags" x-show="selected.length > 0">
      <template x-for="tag in selected" :key="tag">
        <span class="select-modal-tag">
          <span x-text="tag"></span>
          <span class="select-modal-tag-remove" @click.stop="selected = selected.filter(t => t !== tag)">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
          </span>
        </span>
      </template>
    </span>
  </button>

  <div class="modal-backdrop" :data-state="open ? 'open' : 'closed'" @click.self="open = false">
    <div class="modal modal-sm">
      <div class="modal-header">
        <h3 class="modal-title">Technologies</h3>
        <button class="modal-close" @click="open = false">&times;</button>
      </div>
      <div class="modal-body p-0">
        <label class="select-modal-option" :class="selected.includes('React') && 'select-modal-option-selected'">
          <input type="checkbox" class="checkbox-input" value="React" x-model="selected">
          <span class="checkbox-box"><svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
          <span class="select-modal-option-label">React</span>
        </label>
        <label class="select-modal-option" :class="selected.includes('Vue') && 'select-modal-option-selected'">
          <input type="checkbox" class="checkbox-input" value="Vue" x-model="selected">
          <span class="checkbox-box"><svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
          <span class="select-modal-option-label">Vue</span>
        </label>
        <label class="select-modal-option" :class="selected.includes('Svelte') && 'select-modal-option-selected'">
          <input type="checkbox" class="checkbox-input" value="Svelte" x-model="selected">
          <span class="checkbox-box"><svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
          <span class="select-modal-option-label">Svelte</span>
        </label>
        <label class="select-modal-option" :class="selected.includes('Angular') && 'select-modal-option-selected'">
          <input type="checkbox" class="checkbox-input" value="Angular" x-model="selected">
          <span class="checkbox-box"><svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
          <span class="select-modal-option-label">Angular</span>
        </label>
        <label class="select-modal-option" :class="selected.includes('Astro') && 'select-modal-option-selected'">
          <input type="checkbox" class="checkbox-input" value="Astro" x-model="selected">
          <span class="checkbox-box"><svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
          <span class="select-modal-option-label">Astro</span>
        </label>
        <label class="select-modal-option" :class="selected.includes('Next.js') && 'select-modal-option-selected'">
          <input type="checkbox" class="checkbox-input" value="Next.js" x-model="selected">
          <span class="checkbox-box"><svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
          <span class="select-modal-option-label">Next.js</span>
        </label>
      </div>
      <div class="modal-footer">
        <button class="btn btn-ghost btn-sm" @click="selected = []; open = false">Clear All</button>
        <button class="btn btn-sm color-primary" @click="open = false">Done</button>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Tags in trigger with removable chips -->
<button class="select-modal">
  <span class="select-modal-tags">
    <span class="select-modal-tag">
      <span>React</span>
      <span class="select-modal-tag-remove" @click.stop="...">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </span>
    </span>
  </span>
</button>

Requires: tw.min.css

// Tags are removable from the trigger via @click.stop
// .stop prevents the modal from opening when removing a tag
// x-model on checkboxes handles the array binding

Glass Variant

Preview

<div class="p-8 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600">
  <div x-data="{ open: false, selected: '' }">
    <button class="select-modal glass" @click="open = true">
      <span class="select-modal-placeholder" x-show="!selected">Select option...</span>
      <span class="select-modal-value" x-show="selected" x-text="selected"></span>
    </button>

    <div class="modal-backdrop" :data-state="open ? 'open' : 'closed'" @click.self="open = false">
      <div class="modal modal-sm glass">
        <div class="modal-header">
          <h3 class="modal-title">Select Option</h3>
          <button class="modal-close" @click="open = false">&times;</button>
        </div>
        <div class="modal-body p-0">
          <label class="select-modal-option" :class="selected === 'Option A' && 'select-modal-option-selected'">
            <input type="radio" name="opt" class="radio-input" value="Option A" x-model="selected">
            <span class="radio-circle"><span class="radio-dot"></span></span>
            <span class="select-modal-option-label">Option A</span>
          </label>
          <label class="select-modal-option" :class="selected === 'Option B' && 'select-modal-option-selected'">
            <input type="radio" name="opt" class="radio-input" value="Option B" x-model="selected">
            <span class="radio-circle"><span class="radio-dot"></span></span>
            <span class="select-modal-option-label">Option B</span>
          </label>
          <label class="select-modal-option" :class="selected === 'Option C' && 'select-modal-option-selected'">
            <input type="radio" name="opt" class="radio-input" value="Option C" x-model="selected">
            <span class="radio-circle"><span class="radio-dot"></span></span>
            <span class="select-modal-option-label">Option C</span>
          </label>
        </div>
        <div class="modal-footer">
          <button class="btn btn-ghost btn-sm" @click="open = false">Cancel</button>
          <button class="btn btn-sm color-primary" @click="open = false">OK</button>
        </div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Add .glass to both trigger and modal -->
<button class="select-modal glass">...</button>
<div class="modal modal-sm glass">...</div>

Requires: tw.min.css

// Glass variant uses the .glass utility class
// Trigger: .select-modal.glass — Modal: .modal.glass

Sizes

<div class="flex flex-col gap-3 w-full max-w-sm">
  <button class="select-modal select-modal-sm">
    <span class="select-modal-placeholder">Small select...</span>
  </button>
  <button class="select-modal">
    <span class="select-modal-placeholder">Default select...</span>
  </button>
  <button class="select-modal select-modal-lg">
    <span class="select-modal-placeholder">Large select...</span>
  </button>
</div>

Requires: ux.min.css

<!-- .select-modal-sm: h-9, smaller text -->
<!-- .select-modal: h-11 (default) -->
<!-- .select-modal-lg: h-13, larger text -->

Requires: tw.min.css

// No JavaScript needed — pure CSS classes

Variants

<div class="flex flex-col gap-3 w-full max-w-sm">
  <button class="select-modal">
    <span class="select-modal-placeholder">Default (bordered)</span>
  </button>
  <button class="select-modal select-modal-filled">
    <span class="select-modal-placeholder">Filled</span>
  </button>
  <button class="select-modal select-modal-ghost">
    <span class="select-modal-placeholder">Ghost</span>
  </button>
  <button class="select-modal select-modal-error">
    <span class="select-modal-placeholder">Error state</span>
  </button>
  <button class="select-modal select-modal-success">
    <span class="select-modal-value">Success state</span>
  </button>
</div>

Requires: ux.min.css

<!-- .select-modal-filled: filled bg, bottom border -->
<!-- .select-modal-ghost: transparent bg -->
<!-- .select-modal-error / .select-modal-success: colored border -->

Requires: tw.min.css

// No JavaScript needed — pure CSS classes

Disabled Options

Preview

<div x-data="{ open: true, selected: '' }">
  <div class="modal-backdrop" :data-state="'open'" style="position: relative; min-height: 350px; padding: 1rem; background: transparent;">
    <div class="modal modal-sm" style="position: relative; transform: none; opacity: 1;">
      <div class="modal-header">
        <h3 class="modal-title">Select Plan</h3>
      </div>
      <div class="modal-body p-0">
        <label class="select-modal-option" :class="selected === 'free' && 'select-modal-option-selected'">
          <input type="radio" name="plan" class="radio-input" value="free" x-model="selected">
          <span class="radio-circle"><span class="radio-dot"></span></span>
          <span class="select-modal-option-text">
            <span class="select-modal-option-label">Free</span>
            <span class="select-modal-option-description">Basic features</span>
          </span>
        </label>
        <label class="select-modal-option select-modal-option-disabled">
          <input type="radio" name="plan" class="radio-input" value="pro" disabled>
          <span class="radio-circle"><span class="radio-dot"></span></span>
          <span class="select-modal-option-text">
            <span class="select-modal-option-label">Pro (coming soon)</span>
            <span class="select-modal-option-description">Advanced features</span>
          </span>
        </label>
        <label class="select-modal-option" :class="selected === 'enterprise' && 'select-modal-option-selected'">
          <input type="radio" name="plan" class="radio-input" value="enterprise" x-model="selected">
          <span class="radio-circle"><span class="radio-dot"></span></span>
          <span class="select-modal-option-text">
            <span class="select-modal-option-label">Enterprise</span>
            <span class="select-modal-option-description">Custom solution</span>
          </span>
        </label>
      </div>
      <div class="modal-footer">
        <button class="btn btn-sm color-primary">OK</button>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- .select-modal-option-disabled: opacity-40, pointer-events-none -->
<label class="select-modal-option select-modal-option-disabled">
  <input type="radio" class="radio-input" disabled>
  <span class="radio-circle"><span class="radio-dot"></span></span>
  <span class="select-modal-option-label">Pro (coming soon)</span>
</label>

Requires: tw.min.css

// .select-modal-option-disabled adds pointer-events: none + reduced opacity
// The input should also have the disabled attribute

Reference

Trigger Classes

Class	Description
.select-modal	Trigger button styled like a select
.select-modal-value	Displayed selected value text
.select-modal-placeholder	Placeholder when nothing selected
.select-modal-tags	Container for multi-select chips
.select-modal-tag	Individual chip tag
.select-modal-tag-remove	Remove button on tag
.select-modal-sm	Small trigger size
.select-modal-lg	Large trigger size
.select-modal-filled	Filled background variant
.select-modal-ghost	Transparent variant
.select-modal-error	Error state border
.select-modal-success	Success state border
.select-modal.glass	Glass morphism variant

Option Classes (inside modal-body)

Class	Description
.select-modal-option	Option item row (use with label element)
.select-modal-option-selected	Selected state (tinted background)
.select-modal-option-disabled	Disabled option
.select-modal-option-text	Wrapper for label + description
.select-modal-option-label	Primary option text
.select-modal-option-description	Secondary description text
.select-modal-option-check	Checkmark icon (for check-only style)
.select-modal-search	Sticky search input container

Reused Components

Component	Usage
.modal-backdrop + .modal	Overlay container
.modal-header / .modal-footer	Header with title, footer with buttons
.modal-body.p-0	Edge-to-edge option list
.radio-input + .radio-circle	Single select radio buttons
.checkbox-input + .checkbox-box	Multiple select checkboxes
.btn / .btn-ghost / .color-primary	Cancel/OK buttons
.modal.glass	Glass modal variant