Toggle Group

<div class="toggle-group" role="group">
  <button class="toggle-group-item" data-state="on">Left</button>
  <button class="toggle-group-item">Center</button>
  <button class="toggle-group-item">Right</button>
</div>

Requires: ux.min.css

<div class="inline-flex items-center rounded-field" role="group">
  <button class="inline-flex items-center justify-center h-10 px-3 text-[0.8125rem] font-medium bg-base-200 text-base-content rounded-l-field">Left</button>
  <button class="inline-flex items-center justify-center h-10 px-3 text-[0.8125rem] font-medium text-base-content/60 hover:bg-base-200">Center</button>
  <button class="inline-flex items-center justify-center h-10 px-3 text-[0.8125rem] font-medium text-base-content/60 hover:bg-base-200 rounded-r-field">Right</button>
</div>

Requires: tw.min.css

// Single select: items.forEach(item => {
//   item.addEventListener('click', () => {
//     items.forEach(i => i.dataset.state = '');
//     item.dataset.state = 'on';
//   });
// });

<div class="toggle-group toggle-group-outline">
  <button class="toggle-group-item" data-state="on">
    <span class="toggle-group-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/></svg></span>
    Grid
  </button>
  <button class="toggle-group-item">
    <span class="toggle-group-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg></span>
    List
  </button>
</div>

Requires: ux.min.css

<div class="inline-flex items-center rounded-field shadow-xs" role="group">
  <button class="inline-flex items-center justify-center gap-1 h-10 px-3 text-[0.8125rem] font-medium bg-base-200 text-base-content border border-base-300 rounded-l-field">
    <span class="shrink-0 size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-full h-full"><rect x="3" y="3" width="18" height="18" rx="2"/></svg></span>
    Grid
  </button>
  <button class="inline-flex items-center justify-center gap-1 h-10 px-3 text-[0.8125rem] font-medium text-base-content/60 border border-l-0 border-base-300 rounded-r-field hover:bg-base-200 hover:text-base-content">
    <span class="shrink-0 size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-full h-full"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg></span>
    List
  </button>
</div>

Requires: tw.min.css

// Toggle active: item.dataset.state = item.dataset.state === 'on' ? '' : 'on';

<!-- Primary (colored active) -->
<div class="toggle-group toggle-group-outline toggle-group-primary mb-4">
  <button class="toggle-group-item" data-state="on">Day</button>
  <button class="toggle-group-item">Week</button>
  <button class="toggle-group-item">Month</button>
</div>

<!-- Soft -->
<div class="toggle-group toggle-group-outline toggle-group-soft mb-4">
  <button class="toggle-group-item">Bold</button>
  <button class="toggle-group-item" data-state="on">Italic</button>
  <button class="toggle-group-item">Underline</button>
</div>

<!-- Spaced -->
<div class="toggle-group toggle-group-outline toggle-group-spaced mb-4">
  <button class="toggle-group-item" data-state="on">A</button>
  <button class="toggle-group-item">B</button>
  <button class="toggle-group-item">C</button>
</div>

<!-- Vertical -->
<div class="toggle-group toggle-group-outline toggle-group-vertical">
  <button class="toggle-group-item" data-state="on">Top</button>
  <button class="toggle-group-item">Middle</button>
  <button class="toggle-group-item">Bottom</button>
</div>

Requires: ux.min.css

<!-- Primary (colored active) -->
<div class="inline-flex items-center rounded-field shadow-xs mb-4">
  <button class="inline-flex items-center justify-center h-10 px-3 text-[0.8125rem] font-medium bg-primary text-primary-content border border-primary rounded-l-field">Day</button>
  <button class="inline-flex items-center justify-center h-10 px-3 text-[0.8125rem] font-medium text-base-content/60 border border-base-300 border-l-0 hover:bg-base-200 hover:text-base-content">Week</button>
  <button class="inline-flex items-center justify-center h-10 px-3 text-[0.8125rem] font-medium text-base-content/60 border border-base-300 border-l-0 rounded-r-field hover:bg-base-200 hover:text-base-content">Month</button>
</div>

<!-- Soft -->
<div class="inline-flex items-center rounded-field shadow-xs mb-4">
  <button class="inline-flex items-center justify-center h-10 px-3 text-[0.8125rem] font-medium text-base-content/60 border border-base-300 rounded-l-field hover:bg-base-200 hover:text-base-content">Bold</button>
  <button class="inline-flex items-center justify-center h-10 px-3 text-[0.8125rem] font-medium bg-primary/10 text-primary border border-base-300 border-l-0">Italic</button>
  <button class="inline-flex items-center justify-center h-10 px-3 text-[0.8125rem] font-medium text-base-content/60 border border-base-300 border-l-0 rounded-r-field hover:bg-base-200 hover:text-base-content">Underline</button>
</div>

<!-- Spaced -->
<div class="inline-flex items-center gap-1 mb-4">
  <button class="inline-flex items-center justify-center h-10 px-3 text-[0.8125rem] font-medium bg-base-200 text-base-content border border-base-300 rounded-field shadow-xs">A</button>
  <button class="inline-flex items-center justify-center h-10 px-3 text-[0.8125rem] font-medium text-base-content/60 border border-base-300 rounded-field shadow-xs hover:bg-base-200 hover:text-base-content">B</button>
  <button class="inline-flex items-center justify-center h-10 px-3 text-[0.8125rem] font-medium text-base-content/60 border border-base-300 rounded-field shadow-xs hover:bg-base-200 hover:text-base-content">C</button>
</div>

<!-- Vertical -->
<div class="inline-flex flex-col items-stretch rounded-field shadow-xs">
  <button class="inline-flex items-center justify-center h-10 px-3 text-[0.8125rem] font-medium bg-base-200 text-base-content border border-base-300 rounded-t-field">Top</button>
  <button class="inline-flex items-center justify-center h-10 px-3 text-[0.8125rem] font-medium text-base-content/60 border border-base-300 border-t-0 hover:bg-base-200 hover:text-base-content">Middle</button>
  <button class="inline-flex items-center justify-center h-10 px-3 text-[0.8125rem] font-medium text-base-content/60 border border-base-300 border-t-0 rounded-b-field hover:bg-base-200 hover:text-base-content">Bottom</button>
</div>

Requires: tw.min.css

// No JavaScript required for static variants