MiHCM
navigation/@mihcm/ui·v0.21.0·stable

Tabs

Controlled tabbed interface with full keyboard navigation. Composable: Tabs, TabsList, TabsTrigger, TabsContent.

ConfiguratorExamplesUsageAccessibilityApi

Use cases

  • Settings pages with distinct sections (Account, Password, Notifications).
  • Detail views with multiple facets (Overview, Activity, Settings).
  • Dashboards switching between data views without a page reload.
  • Component docs — usage / examples / accessibility panels (this site uses Tabs).

When NOT to use

Variants

VariantUse when
defaultStandard segmented tabs for most UIs. Trigger cells stay equal-width so the active state does not resize the row.
underlineMinimal look — bottom border only, suits page-level sections. Inactive tabs reserve the border height.
pillsSpaced button-style tabs for dashboards and toolbars. Every tab reserves the pill border in all states.

Composition

  • Tabs is controlled via value / onValueChange. For uncontrolled usage, pass defaultValue.
  • Each TabsTrigger accepts an icon prop for leading icons — pair icon + text for scanability.
  • disabled on a trigger prevents selection and greys out the tab.
  • TabsContent renders lazily — only the active panel is in the DOM.
  • Every TabsList variant reserves active-state borders up front so tab selection does not resize the row.
  • Default TabsList uses stable equal-width cells. Use underline or pills for natural-width tabs that still keep a stable footprint.