Pro component

Tabs Rails Components

Navigate between multiple panels of content with keyboard-accessible tabs. Perfect for organizing information and creating intuitive user interfaces.

Installation

1. Stimulus Controller Setup

Start by adding the following controller to your project:

This code is available to Pro users only.

This code is available to Pro users only. 

// Hey curious person!
// You seem to be sneaking around the code...
// I hope you're enjoying the components!
// Have a great day!

class SecretMessage {
  constructor() {
    this.message = "Thanks for checking out Rails Blocks!";
    this.compliment = "You're awesome!";
  }

  reveal() {
    console.log(this.message);
    return this.compliment;
  }
}

const secret = new SecretMessage();
secret.reveal();

Examples

Basic tabs

A simple tabs component with text-only navigation.

Welcome Home

This is the home tab content. You can navigate between tabs using the keyboard arrow keys or by clicking on the tab headers.

This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>

Tabs with icons

Tabs enhanced with icons for better visual hierarchy and user experience.

Information

This tab contains important information about your account.

This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>

Tabs with select dropdown

Tabs integrated with a select dropdown for additional navigation options and mobile-friendly interface.

Go to:

Dashboard Overview

Get a quick summary of your key metrics.

124
Total Users
89%
Satisfaction
$12.4k
Revenue
This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>

Tabs with URL anchors

Bookmarkable tabs that update the browser URL, allowing users to share specific tab states and navigate with browser back/forward buttons.

To enable URL anchors, add data-tabs-update-anchor-value="true" and ensure each tab has a unique id attribute.

Monthly Billing

Pay monthly with no long-term commitment. Notice how the URL updates to #monthly when you select this tab.

Starter

$9/mo
  • Up to 5 projects
  • 10GB storage
  • Email support
  • Basic analytics
Popular

Pro

$29/mo
  • Unlimited projects
  • 100GB storage
  • Priority support
  • Advanced analytics

Enterprise

$99/mo
  • Everything in Pro
  • 1TB storage
  • 24/7 phone support
  • Custom integrations

URL Anchor Feature

Try clicking between pricing tabs and notice how the URL changes to #monthly, #quarterly, or #yearly. You can bookmark any pricing plan and share specific billing periods with others. The page will automatically load the correct tab when accessed with an anchor.

This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>

Vertical tabs

Tabs arranged vertically for sidebar navigation or when you have longer tab labels. Supports both horizontal and vertical arrow key navigation for enhanced accessibility.

No Dashboard Data

Configure your dashboard first.

This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>

Auto-switching tabs with progress bar

Tabs that automatically cycle through content with a visual progress indicator, perfect for feature sections. Automatically pauses on hover or focus for better user control.

Performance Metrics

Monitor your application's performance with real-time metrics and insights.

Tabs switch automatically every 4 seconds. Hover or focus to pause.

This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>

Lazy loading tabs

Load tab content only when needed to improve initial page load performance. Perfect for heavy content like product details or complex forms.

Loading product overview...

This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>

Turbo Frame lazy loading tabs

Load tab content asynchronously from the server using Turbo Frames. Ideal for user dashboards, account settings, or any dynamic content that requires server-side rendering.

Loading account information from server...
This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>
This code is available to Pro users only.

This code is available to Pro users only. 

# Hey curious person!
# You seem to be sneaking around the code...
# I hope you're enjoying the components!
# Have a great day!

class SecretMessage
  def initialize
    @message = "Thanks for checking out Rails Blocks!"
    @compliment = "You're awesome!"
  end

  def reveal
    puts @message
    @compliment
  end
end

secret = SecretMessage.new
secret.reveal
This code is available to Pro users only.

This code is available to Pro users only. 

# Hey curious person!
# You seem to be sneaking around the code...
# I hope you're enjoying the components!
# Have a great day!

class SecretMessage
  def initialize
    @message = "Thanks for checking out Rails Blocks!"
    @compliment = "You're awesome!"
  end

  def reveal
    puts @message
    @compliment
  end
end

secret = SecretMessage.new
secret.reveal

Configuration

The tabs component is powered by a Stimulus controller that provides keyboard navigation, accessibility features, URL anchor support, and flexible configuration options.

Lazy Loading

The tabs controller supports two types of lazy loading to improve performance:

Template-based Lazy Loading

This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>

Turbo Frame Lazy Loading

This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>

Controller Setup

Basic tabs structure with required data attributes:

This code is available to Pro users only.

This code is available to Pro users only. 

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>πŸŽ‰ Hello, Code Detective! πŸ•΅οΈ</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! πŸš€</small></p>
    </div>

    <footer>
      <p>Built with ❀️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! πŸ’»");
  </script>
</body>
</html>

Configuration Values

Prop Description Type Default
index
The initially active tab index (0-based) Number 0
updateAnchor
Whether to update the browser URL with tab anchors Boolean false
scrollToAnchor
Whether to scroll to the tab when URL changes (works with updateAnchor) Boolean false
scrollActiveTabIntoView
Whether to scroll the active tab into view (useful for horizontal scrollable tabs) Boolean false
autoSwitch
Enable automatic tab switching Boolean false
autoSwitchInterval
Time in milliseconds between automatic tab switches Number 5000
pauseOnHover
Whether to pause auto-switching when hovering or focusing the component Boolean true
showProgressBar
Whether to show a progress bar indicating time until next switch Boolean false
lazyLoad
Enable lazy loading of tab content Boolean false
turboFrameSrc
URL for loading tab content via Turbo Frames (enables server-side lazy loading) String ""

Targets

Target Description Required
tab
The clickable tab elements (usually <li> elements containing the tab buttons) Required
panel
The content panels that show/hide based on the active tab Required
select
Optional select dropdown element for alternative navigation Optional
tabList
Optional container for the tab list (used for opacity animations) Optional
progressBar
Optional progress bar element for auto-switching tabs (shows countdown until next switch) Optional
template
Optional template elements containing lazy-loaded content (one per panel for template-based lazy loading) Optional

Actions

Action Description Usage
change
Switches to the clicked tab or selected option data-action="click->tabs#change:prevent"

CSS Classes

activeTab

CSS classes applied to the active tab element

data-tabs-active-tab-class="bg-blue-600 text-white shadow-sm"

inactiveTab

CSS classes applied to inactive tab elements

data-tabs-inactive-tab-class="text-neutral-600 hover:text-neutral-900"

Events

tab-change

Dispatched when the active tab changes. Contains the active tab element and index in the detail.

document.addEventListener('tab-change', (event) => {
  console.log('Active tab:', event.detail.activeIndex);
  console.log('Tab element:', event.target);
});

Accessibility Features

  • Enhanced Keyboard Navigation: Use ← β†’ or ↑ ↓ to navigate between tabs, Home/End for first/last tab (works for both horizontal and vertical orientations)
  • ARIA Support: Automatic aria-selected and tabindex management
  • Focus Management: Proper focus handling when switching tabs via keyboard or mouse
  • Screen Reader Friendly: ARIA attributes and semantic structure for accessibility

Advanced Features

  • URL Integration: Bookmarkable tab states with browser back/forward support
  • Select Integration: Works seamlessly with HTML select elements for alternative navigation
  • Dynamic Tab Control: Change tabs programmatically using data attributes or JavaScript
  • Auto-switching: Configurable automatic tab cycling with optional progress bar and hover pause functionality
  • Responsive Design: Optional horizontal scrolling support for tabs that overflow
  • Lazy Loading: Load tab content on-demand with template-based or Turbo Frame server-side loading
Radio
Testimonial

Table of contents

Get notified when new components come out