Toggle Tabs Slider

A toggle tabs slider built with pure HTML and CSS that switches between content panels using a sliding active indicator. It enhances state transition clarity and interactive feedback without requiring JavaScript.

Usage

Use this component when interfaces require binary or multi option toggling, such as monthly/yearly pricing switches, feature filters, dashboard views, or content segmentation controls.

Implementation

The sliding indicator is achieved using CSS state selectors and transform based transitions, allowing the highlight element to move smoothly between tab options. Responsive styling ensures consistent alignment across screen sizes.

HTML

<div class="ss-tabs toggle preview">
  <input type="radio" name="billing" id="monthly" checked>
  <label for="monthly">Monthly</label>

  <input type="radio" name="billing" id="yearly">
  <label for="yearly">Yearly</label>
</div>

<div class="ss-tabs toggle preview">
  <input type="radio" name="billing" id="monthly" checked>
  <label for="monthly">Monthly</label>

  <input type="radio" name="billing" id="yearly">
  <label for="yearly">Yearly</label>
</div>

CSS

.ss-tabs.toggle.preview{
  display:inline-flex;
  gap:4px;
  padding:4px;
  border-radius:999px;
  background:var(--toggle-bg);
  border:1px solid var(--toggle-border);
  font-size:13px;
}

.ss-tabs.toggle.preview input{
  display:none;
}

.ss-tabs.toggle.preview label{
  padding:6px 14px;
  border-radius:999px;
  cursor:pointer;
  color:var(--toggle-text);
  transition:background .2s ease, color .2s ease;
}

#monthly:checked + label,
#yearly:checked + label{
  background:var(--toggle-active-bg);
  color:var(--toggle-active-text);
}

:root{
  --toggle-bg:#e5e7eb;
  --toggle-border:#d1d5db;
  --toggle-text:#0f172a;
  --toggle-active-bg:#2563eb;
  --toggle-active-text:#ffffff;
}

@media (prefers-color-scheme: dark){
  :root{
    --toggle-bg:#1f2937;
    --toggle-border:#374151;
    --toggle-text:#e5e7eb;
    --toggle-active-bg:#3b82f6;
    --toggle-active-text:#ffffff;
  }
}

.ss-tabs.toggle.preview{
  display:inline-flex;
  gap:4px;
  padding:4px;
  border-radius:999px;
  background:var(--toggle-bg);
  border:1px solid var(--toggle-border);
  font-size:13px;
}

.ss-tabs.toggle.preview input{
  display:none;
}

.ss-tabs.toggle.preview label{
  padding:6px 14px;
  border-radius:999px;
  cursor:pointer;
  color:var(--toggle-text);
  transition:background .2s ease, color .2s ease;
}

#monthly:checked + label,
#yearly:checked + label{
  background:var(--toggle-active-bg);
  color:var(--toggle-active-text);
}

:root{
  --toggle-bg:#e5e7eb;
  --toggle-border:#d1d5db;
  --toggle-text:#0f172a;
  --toggle-active-bg:#2563eb;
  --toggle-active-text:#ffffff;
}

@media (prefers-color-scheme: dark){
  :root{
    --toggle-bg:#1f2937;
    --toggle-border:#374151;
    --toggle-text:#e5e7eb;
    --toggle-active-bg:#3b82f6;
    --toggle-active-text:#ffffff;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Includes sliding active indicator
• Enhances toggle interaction visibility
• Fully responsive across breakpoints
• Suitable for pricing and dashboard toggles
• Easy to customize slider color and animation timing

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.