Toggle Group
Group of toggle buttons for single or multiple selection, with outline, vertical, primary, and glass variants.
Basic Toggle Group
Preview
<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';
// });
// }); Outline & Icons
Preview
<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'; Variants
Preview
<!-- 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 | Class | Description |
|---|---|
.toggle-group | Container (inline-flex) |
.toggle-group-item | Toggle button (40px) |
.toggle-group-item-active | Active state (class) |
.toggle-group-icon | Icon (16px) |
.toggle-group-outline | Bordered variant |
.toggle-group-sm | Small (32px) |
.toggle-group-lg | Large (48px) |
.toggle-group-full | Full width |
.toggle-group-vertical | Vertical layout |
.toggle-group-spaced | Gap between items |
.toggle-group-primary | Primary color active |
.toggle-group-soft | Soft tinted active |
.toggle-group-icon-only | Icon-only buttons |
.toggle-group-equal | Equal width items |
.toggle-group.glass | Glass morphism variant |