Mushilu-San UI

Search components

PlaygroundStorybookGitHub
Navigation

Tabs

Switches between related panels of content in the same view.

Selector: mui-tabs

Import
import { Tabs, TabList, Tab, TabPanel } from '@mushilu-san/ui/navigation';
PreviewCode

Loading example…

Overview

Tabs is a compound component. mui-tabs holds the active value, mui-tab-list holds the mui-tab triggers, and each mui-tab-panel shows when its value matches.

The active tab is a two-way activeTab model, so you can bind it with [(activeTab)] to sync it with the URL or other state.

When to use

  • Grouping related content that users switch between without leaving the page.
  • Settings or detail screens with a few peer sections.

When not to use

  • Triggering an action. Tabs only switch views. Use Button instead.
  • Sequential steps that must be done in order. Use a stepper or a multi-step form.
  • More than about six sections. Use a sidebar or a menu.

Examples

Vertical

With orientation="vertical", Up and Down arrows move between tabs.

PreviewCode

Loading example…

Disabled tab

Disabled tabs are skipped by arrow-key navigation and cannot be activated.

PreviewCode

Loading example…

Guidelines

Do

  • Give every mui-tab-list an aria-label that names the group.
  • Keep tab labels short, one or two words.
  • Use values that are unique on the page. Tab ids are derived from them.

Don't

  • Do not nest tabs inside tabs.
  • Do not put the only path to critical content behind a disabled tab without explaining why.

Accessibility

Roles and attributes

ElementRoleNotes
mui-tab-listtablistaria-orientation follows the orientation input.
mui-tabtabaria-selected, aria-controls; aria-disabled when disabled.
mui-tab-paneltabpanelaria-labelledby points at its tab.

Keyboard

KeysAction
ArrowLeftArrowRightMoves focus between tabs (horizontal). Wraps at the ends.
ArrowUpArrowDownMoves focus between tabs (vertical).
HomeEndMoves focus to the first or last enabled tab.
EnterSpaceActivates the focused tab.
  • Activation is manual. Arrow keys move focus, and Enter or Space selects. This avoids loading panels the user is only passing over.
  • Only the active tab is in the tab order (roving tabindex). Always set an initial activeTab; with the default empty value no tab is focusable.
  • Inactive panels are hidden and their content is not rendered. The active panel is itself focusable (tabindex="0").

API

Tabs

Selector: mui-tabs

NameTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal' Whether the tab list runs horizontally or vertically. Default `horizontal`.
NameTypeDefaultDescription
activeTabstring'' Value of the selected tab. Two-way bindable with `[(activeTab)]`.

CSS parts

  • ::part(tabs)

TabList

Selector: mui-tab-list

CSS parts

  • ::part(tab-list)

Tab

Selector: mui-tab

NameTypeDefaultDescription
valuerequiredstring— Value that identifies this tab and its panel.
disabledbooleanfalse Disables this tab. It is skipped by the arrow keys. Accepts attribute presence, e.g. <… disabled>.

CSS parts

  • ::part(tab)

TabPanel

Selector: mui-tab-panel

NameTypeDefaultDescription
valuerequiredstring— Value of the tab that controls this panel.

CSS parts

  • ::part(tab-panel)

Tokens

  • --mui-color-primary
  • --mui-color-border
  • --mui-color-text
  • --mui-color-text-muted
  • --mui-color-text-disabled
  • --mui-color-focus-ring
  • --mui-touch-target

Navigation

IntroductionInstallationAll componentsAvatarBadgeButtonDividerIconSpinnerCalendarCheckboxDate pickerForm fieldInputInput groupInput OTPLabelRadioSelectSliderTextareaToggleToggle groupAspect ratioContainerGridResizableScroll areaSidebarSpacerStackBreadcrumbMenubarNav linkNavigation menuPaginationTabsAlertAlert dialogDialogProgressSheetSkeletonToastAccordionCardCarouselChartEmpty stateTableTooltipTypographyBottom sheetFloating action buttonMobile navigationSwipe actionComboboxCommandContext menuDropdown menuHover cardPopover