A tabbed interface component that organizes content into multiple panels. Only one tab is active at a time; clicking a...

A tabbed interface component that organizes content into multiple panels. Only one tab is active at a time; clicking a tab label shows its content panel. Supports keyboard navigation (arrow keys), inverted styling for dark backgrounds, and alignment control. Use tabs to: - Organize related content into manageable sections - Create multi-step workflows or configurations - Switch between content categories (e.g., account, settings, billing) - Reduce vertical scrolling by grouping related information Composition: - ed-tabs container (parent) - ed-tab children (panels with href, label properties and slot content) Each tab automatically renders a trigger in the tab list and a content panel. Features: - Keyboard navigation: Arrow keys to switch tabs, Enter/Space to activate - Tab labels rendered from ed-tab label property - Content panels show/hide based on activeIndex - Inverted styling for dark backgrounds - Alignment options (center, right) - Horizontal scroll indicators for overflowing tab lists

<ed-tabs></ed-tabs>

Properties

Name Type Default Description
inverted Boolean false A tabbed interface component that organizes content into multiple panels. Only one tab is active at a time; clicking a tab label shows its content panel. Supports keyboard navigation (arrow keys), inverted styling for dark backgrounds, and alignment control. Use tabs to: - Organize related content into manageable sections - Create multi-step workflows or configurations - Switch between content categories (e.g., account, settings, billing) - Reduce vertical scrolling by grouping related information Composition: - ed-tabs container (parent) - ed-tab children (panels with href, label properties and slot content) Each tab automatically renders a trigger in the tab list and a content panel. Features: - Keyboard navigation: Arrow keys to switch tabs, Enter/Space to activate - Tab labels rendered from ed-tab label property - Content panels show/hide based on activeIndex - Inverted styling for dark backgrounds - Alignment options (center, right) - Horizontal scroll indicators for overflowing tab lists / export class EdTabs extends EdElement { static get styles() { return unsafeCSS(styles); } /** Inverted variant 1) Used on dark backgrounds
activeIndex Number number Active tab state 1) Sets the initial active tab (e.g. 0 sets the first tab, 1 sets the second tab, etc.)
align String 'center' | 'right' Active tab state / activeTab?: Element; isStart?: boolean = true; isEnd?: boolean = false; /** Align variants <ed-text-passage size="sm"> <ul> <li>**center** aligns the tabs in the center of the screen on medium/large screens.</li> <li>**right** aligns the tabs on the right side of the screen on medium/large screens.</li> </ul> </ed-text-passage>

Slots

Name Description
- Tab panels (ed-tab elements)
tabsAfter Optional content after tab list (filters, actions, etc.)

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/tabs/tabs.ts