Picker

<div class="picker picker-inline">
  <div class="picker-header">
    <button class="picker-btn picker-btn-cancel">Cancel</button>
    <h4 class="picker-title">Select Time</h4>
    <button class="picker-btn picker-btn-confirm">Done</button>
  </div>
  <div class="picker-columns">
    <div class="picker-column">
      <div class="picker-column-wrapper">
        <div class="picker-item">10</div>
        <div class="picker-item">11</div>
        <div class="picker-item picker-item-selected">12</div>
        <div class="picker-item">13</div>
        <div class="picker-item">14</div>
      </div>
    </div>
    <div class="picker-divider">:</div>
    <div class="picker-column">
      <div class="picker-column-wrapper">
        <div class="picker-item">28</div>
        <div class="picker-item">29</div>
        <div class="picker-item picker-item-selected">30</div>
        <div class="picker-item">31</div>
        <div class="picker-item">32</div>
      </div>
    </div>
    <div class="picker-column">
      <div class="picker-column-wrapper">
        <div class="picker-item">AM</div>
        <div class="picker-item picker-item-selected">PM</div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="border border-base-300 rounded-box overflow-hidden">
  <div class="flex items-center justify-between min-h-11 px-2 bg-base-200 rounded-t-box">
    <button class="px-4 py-2 text-primary bg-transparent border-none">Cancel</button>
    <h4 class="flex-1 text-center font-semibold text-[0.9375rem]">Select Time</h4>
    <button class="px-4 py-2 text-primary font-semibold bg-transparent border-none">Done</button>
  </div>
  <div class="flex h-54 overflow-hidden relative">
    <!-- Selection highlight band -->
    <div class="absolute left-0 right-0 top-1/2 -translate-y-1/2 h-9 bg-base-200 border-y border-base-300 pointer-events-none z-0"></div>
    <!-- Gradient masks -->
    <div class="absolute inset-0 pointer-events-none z-1" style="background: linear-gradient(to bottom, var(--color-base-100) 0%, transparent 20%, transparent 80%, var(--color-base-100) 100%)"></div>
    <!-- Columns with items... -->
  </div>
</div>

Requires: tw.min.css

// Scroll/drag to change value:
// Use touch events (touchstart, touchmove, touchend)
// Calculate offset based on item height (36px)
// Snap to nearest item on release
// Update wrapper transform: wrapper.style.transform = 'translateY(calc(-50% + offset))';

<!-- Trigger button -->
<button class="btn" onclick="document.getElementById('picker-demo').dataset.state='open'">
  Open Picker
</button>

<!-- Picker with backdrop -->
<div class="picker-backdrop" id="picker-demo" data-state="closed">
  <div class="picker">
    <div class="picker-header">
      <button class="picker-btn picker-btn-cancel" onclick="document.getElementById('picker-demo').dataset.state='closed'">Cancel</button>
      <h4 class="picker-title">Select Date</h4>
      <button class="picker-btn picker-btn-confirm" onclick="document.getElementById('picker-demo').dataset.state='closed'">Done</button>
    </div>
    <div class="picker-columns">
      <div class="picker-column">
        <div class="picker-column-label">Month</div>
        <div class="picker-column-wrapper">
          <div class="picker-item">January</div>
          <div class="picker-item picker-item-selected">February</div>
          <div class="picker-item">March</div>
        </div>
      </div>
      <div class="picker-column">
        <div class="picker-column-label">Day</div>
        <div class="picker-column-wrapper">
          <div class="picker-item">14</div>
          <div class="picker-item picker-item-selected">15</div>
          <div class="picker-item">16</div>
        </div>
      </div>
      <div class="picker-column">
        <div class="picker-column-label">Year</div>
        <div class="picker-column-wrapper">
          <div class="picker-item">2024</div>
          <div class="picker-item picker-item-selected">2025</div>
          <div class="picker-item">2026</div>
        </div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Trigger button -->
<button class="btn" onclick="document.getElementById('tw-picker-demo').classList.toggle('hidden')">
  Open Picker
</button>

<!-- Picker with backdrop -->
<div id="tw-picker-demo" class="fixed inset-0 bg-black/40 z-400 hidden">
  <div class="fixed left-0 right-0 bottom-0 bg-base-100 rounded-t-2xl z-500 pb-[env(safe-area-inset-bottom)]">
    <div class="flex items-center justify-between shrink-0 min-h-11 px-2 border-b border-base-300">
      <button class="flex items-center justify-center bg-transparent border-none cursor-pointer min-w-15 min-h-11 px-4 py-2 text-primary text-[0.9375rem]" onclick="document.getElementById('tw-picker-demo').classList.add('hidden')">Cancel</button>
      <h4 class="flex-1 text-center font-semibold text-[0.9375rem] m-0 text-base-content">Select Date</h4>
      <button class="flex items-center justify-center bg-transparent border-none cursor-pointer min-w-15 min-h-11 px-4 py-2 text-primary text-[0.9375rem] font-semibold" onclick="document.getElementById('tw-picker-demo').classList.add('hidden')">Done</button>
    </div>
    <div class="flex h-54 overflow-hidden relative">
      <div class="absolute left-0 right-0 top-1/2 -translate-y-1/2 h-9 bg-base-200 border-y border-base-300 pointer-events-none z-0"></div>
      <div class="absolute inset-0 pointer-events-none z-1" style="background: linear-gradient(to bottom, var(--color-base-100) 0%, transparent 20%, transparent 80%, var(--color-base-100) 100%)"></div>
      <div class="flex-1 h-full overflow-hidden relative">
        <div class="absolute left-0 right-0 text-center text-xs font-semibold uppercase tracking-wide top-1 text-base-content/40 z-2">Month</div>
        <div class="absolute left-0 right-0 top-1/2 -translate-y-1/2">
          <div class="flex items-center justify-center h-9 px-4 text-lg text-base-content/60 cursor-pointer">January</div>
          <div class="flex items-center justify-center h-9 px-4 text-lg text-base-content font-medium cursor-pointer">February</div>
          <div class="flex items-center justify-center h-9 px-4 text-lg text-base-content/60 cursor-pointer">March</div>
        </div>
      </div>
      <div class="flex-1 h-full overflow-hidden relative">
        <div class="absolute left-0 right-0 text-center text-xs font-semibold uppercase tracking-wide top-1 text-base-content/40 z-2">Day</div>
        <div class="absolute left-0 right-0 top-1/2 -translate-y-1/2">
          <div class="flex items-center justify-center h-9 px-4 text-lg text-base-content/60 cursor-pointer">14</div>
          <div class="flex items-center justify-center h-9 px-4 text-lg text-base-content font-medium cursor-pointer">15</div>
          <div class="flex items-center justify-center h-9 px-4 text-lg text-base-content/60 cursor-pointer">16</div>
        </div>
      </div>
      <div class="flex-1 h-full overflow-hidden relative">
        <div class="absolute left-0 right-0 text-center text-xs font-semibold uppercase tracking-wide top-1 text-base-content/40 z-2">Year</div>
        <div class="absolute left-0 right-0 top-1/2 -translate-y-1/2">
          <div class="flex items-center justify-center h-9 px-4 text-lg text-base-content/60 cursor-pointer">2024</div>
          <div class="flex items-center justify-center h-9 px-4 text-lg text-base-content font-medium cursor-pointer">2025</div>
          <div class="flex items-center justify-center h-9 px-4 text-lg text-base-content/60 cursor-pointer">2026</div>
        </div>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Open: backdrop.dataset.state = 'open';
// Close: backdrop.dataset.state = 'closed';