bellhop by actabl

Components

search
Accordion
App Bar
Avatar
Avatar Stacked
Badge
Badge Dot
Breadcrumbs
Button
Button Icon
Card
Checkbox
Checkbox Group
Container
Data Grid
Date Picker
Date Range Picker
Dropdown
Empty State
Illustrations
Input Autocomplete
Input Number
Input Password
Input Text
Input Verification
Loader Spinner
Logo Box
Modal
Notification
Page Navigation
Pagination
Popover
Product Switcher
Property Switcher
Radio Button
Sidebar
Skeleton Loader
Tabs
Tag
Textarea
Toggle
Tooltip

Tabs

Tabs organize and navigate between related content in a single container, showing one panel at a time.

When to use

Use tabs when you have multiple views or sections of related content that users need to switch between frequently.

Content Organization

Group related content into logical sections like Overview, Details, Settings, and Activity.

Form Sections

Split complex forms into steps or categories to reduce cognitive load and improve completion rates.

Data Views

Switch between different views of the same data, such as Table, Grid, and Chart visualizations.

Settings Pages

Organize settings into categories like Account, Preferences, Security, and Notifications.

When not to use

  • For sequential workflows—use a stepper or wizard instead
  • When content in each tab is very short—display inline
  • For navigation between different pages—use standard navigation
  • When all content should be visible at once—use accordions or display inline

Anatomy

Tabs consist of a tab list with clickable tab buttons and corresponding content panels.

  1. Tab List Container

    Horizontal or vertical container holding all tab buttons

  2. Tab Button

    Clickable label that activates its corresponding content panel

  3. Active Indicator

    Visual highlight showing which tab is currently selected

  4. Content Panel

    Area displaying the content associated with the active tab

Types

Tabs come in different styles and orientations to suit various design needs.

Contained Style

Tab buttons with filled backgrounds that stand out prominently from the content area.

Underline Style

Minimal style with a bottom border indicator for a cleaner, less prominent appearance.

Full Width

Tab buttons expand to fill the entire width of their container evenly.

With Disabled Tab

Individual tabs can be disabled to prevent interaction while remaining visible.

Vertical Contained

Tabs arranged vertically on the left side with contained button style.

Vertical Underline

Tabs arranged vertically with underline style for a minimal appearance.

Interaction

Tabs respond to user clicks and keyboard navigation with smooth transitions between content panels.

Tab Selection

Clicking a tab activates it and displays its associated content panel while hiding others.

Keyboard Navigation

Users can navigate between tabs using arrow keys and activate them with Enter or Space.

Visual Feedback

Hover, focus, and active states provide clear visual feedback for tab interactions.

Disabled State

Disabled tabs show reduced opacity and do not respond to clicks or keyboard input.

Placement

Tabs can be positioned horizontally at the top or vertically on the side of content areas.

Page Navigation

Use at the top of pages to navigate between major sections like Dashboard, Reports, and Settings.

Within Cards

Place inside cards or panels to organize related content in a compact space.

Sidebar Navigation

Vertical tabs work well in sidebars for settings pages or multi-step forms.

Modal Dialogs

Organize modal content into tabs when the dialog contains multiple related sections.

Accessibility

Tabs follow WAI-ARIA tab panel pattern for full keyboard accessibility and screen reader support.

Keyboard Support

  • Tab: Move focus into and out of the tab list
  • Arrow Keys: Navigate between tabs (left/right for horizontal, up/down for vertical)
  • Home/End: Jump to first or last tab
  • Enter/Space: Activate the focused tab

ARIA Attributes

  • role="tablist": Identifies the tab list container
  • role="tab": Marks each tab button
  • role="tabpanel": Identifies content panels
  • aria-selected: Indicates the currently selected tab
  • aria-controls: Associates tabs with their content panels
  • aria-labelledby: Associates panels with their tab labels

Screen Reader Support

  • Tab roles and states are announced clearly
  • Current tab position is communicated (e.g., "2 of 4")
  • Disabled tabs are announced as unavailable
  • Content panels are properly associated with their tabs

Focus Management

  • Clear focus indicators on tab buttons
  • Focus moves to activated tab when using arrow keys
  • Disabled tabs are skipped during keyboard navigation
  • Focus returns to tab list when navigating back from content

Resources

Design and development resources for the Tabs component.

Figma

Available
View in Figma →

Web Components/Angular

Available
View in Storybook →

React

Available
View in Storybook →