Tabs - Quick Start Guide

3-Minute Setup

1 Include Files

2 Create Your Tabs



    
        Overview
        Features
        Support
    
    
        
            Overview content...
        
        
            Features content...
        
        
            Support content...

✓ Done! Your tabs are now functional with keyboard navigation and screen reader support.

Quick Reference

Class/Attribute	Purpose
`.tabs-display`	Wrapper for entire tab component
`.tabs`	Container for tab buttons
`.tab-link`	Individual tab button
`.tab-content`	Individual tab panel
`data-tab="id"`	Unique identifier matching tab to panel
`.active`	Currently visible tab/panel
`role="tablist"`	ARIA role for tab container
`role="tab"`	ARIA role for each tab
`role="tabpanel"`	ARIA role for each content panel

Pro Tips

✨ Tip 1: Use data-tab values that match—the system connects tabs to panels automatically

✨ Tip 2: Tab navigation works with Tab/Shift+Tab keys for full keyboard accessibility

✨ Tip 3: Add icons using FontAwesome classes inside .tab-link elements

✨ Tip 4: Skip links are automatically added for keyboard users to jump past tabs

ADA Compliance Built-In

RSL Tabs are ADA-compliant by default:

✅ Proper ARIA roles (tablist, tab, tabpanel)
✅ Tab/Shift+Tab keyboard navigation
✅ aria-selected and aria-hidden managed automatically
✅ Skip links for keyboard-only users
✅ Focus visible on active tab

FilterBus Integration

Tabs can subscribe to RSL's FilterBus for visibility filtering based on external filter controls. This is ideal for dashboard scenarios where filter buttons control which tab groups are displayed.

How It Works

Add data-filter-subscribe="key" to listen to a FilterBus channel
Add data-filter-value="value" to specify which filter value this tab group matches
Tab groups without data-filter-value always show
"All" filter value shows all tab groups (case-insensitive)

FilterBus Integration Attributes

Attribute	Type	Description
`data-filter-subscribe`	String	FilterBus key to subscribe to (e.g., "region", "category")
`data-filter-value`	String	Filter value(s) this tab group matches. Supports comma-separated values for multi-match (e.g., "North,South"). Tab groups without this attribute always show.

Example




    
    
    




    
        Overview
        Details
    
    
        North region overview...
    
    
        North region details...

Events

Event	Detail	Description
`rsl-tabs:filterbus-update`	`{ state, meta, visible }`	Fired when tab group visibility changes due to FilterBus update

See It In Action: Visit the FilterBus Dashboard Demo to see tabs filtering alongside tables, charts, and other components.

Date Range Filtering

Tab groups can be filtered by date range when used with the Date Picker component. This is ideal for event listings, schedules, or any time-based content organized in tabs.

How It Works

Add data-date="YYYY-MM-DD" to the tab group with the event/content date
When a Date Picker publishes a range to FilterBus, tabs outside that range are hidden
Supports ISO (YYYY-MM-DD), US (MM/DD/YYYY), and European (DD.MM.YYYY) date formats
Works alongside visibility filtering (both can be used together)

Date Filtering Attributes

Attribute	Type	Description
`data-date`	String	Date associated with this tab group (e.g., "2025-12-15"). Tab hides when outside date picker range.

Example: Event Tabs with Date Filtering







    
        Agenda
        Speakers
    
    
        Holiday Party - Dec 15, 2025
    
    
        Special guests and activities...

Date Filter Events

Event	Detail	Description
`rsl-tabs:date-filter-update`	`{ state, meta, visible, tabDate }`	Fired when tab group visibility changes due to date range filter