Tabs

Usage examples

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@rookcom/monarch-react';

<Tabs defaultValue="open">
  <TabsList aria-label="Requests">
    <TabsTrigger value="open" count={6} countTone="accent">
      Open
    </TabsTrigger>
    <TabsTrigger value="waiting" count={3} countTone="warning">
      Waiting
    </TabsTrigger>
    <TabsTrigger value="closed" count={15}>
      Closed
    </TabsTrigger>
  </TabsList>
  <TabsContent value="open">Open requests</TabsContent>
  <TabsContent value="waiting">Waiting requests</TabsContent>
  <TabsContent value="closed">Closed requests</TabsContent>
</Tabs>

import { TabsLink, TabsNav } from '@rookcom/monarch-react';

<TabsNav aria-label="Project sections">
  <TabsLink href="#/components/tabs" active>
    Overview
  </TabsLink>
  <TabsLink href="#/components/tabs" count={4}>
    Issues
  </TabsLink>
  <TabsLink href="#/components/tabs">Settings</TabsLink>
</TabsNav>

import { useState } from 'react';
import { TabsFilter } from '@rookcom/monarch-react';

const STATUS = [
  { value: 'all', label: 'All', count: 24 },
  { value: 'open', label: 'Open', count: 6, countTone: 'accent' as const },
  { value: 'waiting', label: 'Waiting', count: 3, countTone: 'warning' as const },
  { value: 'closed', label: 'Closed', count: 15 },
];

function FilterDemo() {
  const [status, setStatus] = useState('open');
  return (
    <TabsFilter
      aria-label="Status"
      options={STATUS}
      scrollable
      value={status}
      onValueChange={setStatus}
    >
      Showing {STATUS.find((s) => s.value === status)?.label.toLowerCase()} requests.
    </TabsFilter>
  );
}

<FilterDemo />

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@rookcom/monarch-react';

const SECTIONS = [
  'Overview',
  'Activity',
  'Files',
  'Members',
  'Integrations',
  'Billing',
  'Audit log',
  'Settings',
];

<div style={{ width: '100%', maxWidth: 320 }}>
  <Tabs defaultValue="Overview">
    <TabsList aria-label="Workspace sections" scrollable>
      {SECTIONS.map((s) => (
        <TabsTrigger key={s} value={s}>
          {s}
        </TabsTrigger>
      ))}
    </TabsList>
    {SECTIONS.map((s) => (
      <TabsContent key={s} value={s}>
        {s}
      </TabsContent>
    ))}
  </Tabs>
</div>

<p>
  <code>useTabsUrlBinding</code> takes the value your router read and a setter, and
  returns <code>value</code> / <code>onValueChange</code> for Tabs or TabsFilter.
</p>

Purpose

Switches between panels of related content in the same place, showing one panel at a time.

Design principles

• line for page sections, pill for compact view switches.
• Short, noun labels that do not wrap (white-space: nowrap).
• The active tab is shown by text colour plus an accent underline (line) or a raised surface (pill), never by colour alone.
• Semantics follow behaviour: panels use the tab pattern, pages use links with aria-current, filters use tabs with one shared panel.
• No router dependency: link tabs render your router’s link with asChild, URL state is injected through value / onValueChange (or useTabsUrlBinding).
• A count belongs in the tab’s name, so it is plain text inside the trigger, not a decorative badge.

API reference

import { Tabs, TabsContent, TabsFilter, TabsLink, TabsList, TabsNav, TabsTrigger, useTabsUrlBinding } from '@rookcom/monarch-react';

Tabs is the Radix Tabs Root: value / defaultValue / onValueChange, orientation, activationMode and dir come from @radix-ui/react-tabs.

TabsList, TabsTrigger and TabsContent forward their refs to the Radix parts.

TabsNav renders a <nav> (ref to it) and TabsLink an <a> (or the child with asChild); all anchor attributes pass through.

TabsFilter renders a wrapper <div> (ref) with the tablist and, when given children, one shared tabpanel. Its options are data: { value, label, count?, countTone?, disabled? }.

useTabsUrlBinding({ value, onChange, values, defaultValue, clearDefault }) returns { value, onValueChange } to spread on Tabs or TabsFilter: unknown URL values fall back to the default, and choosing the default writes null so the param is removed.

Generated from the TypeScript declarations of packages/react/src/components/navigation/tabs.

Properties

Variants

States

Interaction behaviour

• Clicking a trigger selects it and shows its panel.
• By default a tab is selected as soon as it receives focus (Radix activationMode="automatic"); pass activationMode="manual" to select only with Enter or Space.
• Only the active panel is rendered; inactive panels are unmounted unless forceMount is set on TabsContent.
• Controlled with value + onValueChange, or uncontrolled with defaultValue. TabsFilter works the same way; uncontrolled it starts on the first enabled option.
• TabsLink navigates like any link; the app decides which one is active from its router.
• TabsFilter has no per-tab panels. With children, one shared panel is labelled by the selected tab; without, the tabs carry no aria-controls.
• In a scrollable list, focusing a tab scrolls it into view.

Keyboard support

TabsFilter implements the same model as Tabs: ArrowLeft/Right (mirrored in right-to-left), Home/End, disabled tabs skipped, one tab stop.

Accessibility

Role

tablist, tab and tabpanel

Accessible name

Give TabsList an aria-label (or aria-labelledby) naming the set, such as "Views".

• Triggers expose aria-selected and aria-controls; panels are labelled by their trigger.
• Roving tabindex: only the active tab is in the Tab order.
• The active panel is focusable so keyboard users can reach content that has no focusable element.
• Verified with axe in jsdom and in Chromium, Firefox and WebKit on /components/tabs.
• TabsNav is a navigation landmark and requires aria-label; TabsLink marks the current page with aria-current="page", never aria-selected.
• TabsFilter requires aria-label; tabs expose aria-selected, and aria-controls only when the shared panel exists.
• Counts are text inside the trigger, so "Open 6" is announced; pass a string such as "6 new" when the number alone is unclear.

Responsive behaviour

• The list is a single flex row that does not wrap and labels do not wrap. Set scrollable when the tabs may not fit at 320px; otherwise keep the set small or use pill.
• Trigger height comes from --mn-control-md and does not change with viewport width.
• A scrollable list takes the width of its container (contain: inline-size), so it never widens the layout; give it a block or full-width parent.

Theme support

• Colours are Monarch semantic tokens only, so light, dark and more-contrast themes apply automatically.
• The line underline uses --mn-color-accent-strong, so it follows the product accent.
• The pill track uses --mn-color-bg-muted and the active pill --mn-color-bg-surface with --mn-shadow-xs.
• Count tones use each intent’s subtle and strong tokens, which meet text contrast in every theme.

Do and don't

Related components

• SegmentedControl: SegmentedControl / ToggleGroup pick a value with radio or pressed semantics; use them for a compact view or option switch, and TabsFilter when the choice filters a list shown as tabs.
• Filter Chips (stable): Several independent filters at once, rather than one exclusive view.
• PageHeader: Has a tabs slot for page-level section tabs.
• Breadcrumb: Shows location across pages rather than sections of one page.

Dependencies

Testing coverage

• Tab focuses the active tab; ArrowRight moves focus and selects the next tab.
• The selected tab has aria-selected="true" and its panel is shown.
• No axe violations in jsdom.
• Renders on the server.
• Counts are part of the tab name and carry their tone; scrollable is exposed; asChild still works without a count.
• TabsNav/TabsLink: navigation landmark, aria-current="page" on the active link, router link via asChild, Tab moves between links, no tab roles; SSR.
• TabsFilter uncontrolled: roving tab stop, arrows skip disabled and wrap, Home/End, selection follows focus, no aria-controls without a panel.
• TabsFilter controlled with a shared panel and manual activation: panel labelled by the selected tab, Enter selects; one tab stop for an unknown value; SSR.
• useTabsUrlBinding: unknown and missing values fall back to the default, the default writes null unless clearDefault is false, unknown values are ignored, and it drives Tabs from injected URL state.

Tests: packages/react/src/components/navigation/tabs