LayoutReact

Tabs

A component for toggling between related panels on the same page.

Rendered by React 19.3.1

Loading React…

import { Tabs } from '@hamur/react/tabs'

export default function TabsExample() {
  return (
    <Tabs.Root className="tabs" defaultValue="overview">
      <Tabs.List className="tabs-list" aria-label="Workspace">
        <Tabs.Tab className="tab" value="overview">
          Overview
        </Tabs.Tab>
        <Tabs.Tab className="tab" value="projects">
          Projects
        </Tabs.Tab>
        <Tabs.Tab className="tab" value="billing" disabled>
          Billing
        </Tabs.Tab>
        <Tabs.Tab className="tab" value="account">
          Account
        </Tabs.Tab>
        <Tabs.Indicator className="tabs-indicator" />
      </Tabs.List>
      <Tabs.Panel className="tabs-panel" value="overview">
        Workspace stats and activity.
      </Tabs.Panel>
      <Tabs.Panel className="tabs-panel" value="projects">
        Milestones and deadlines.
      </Tabs.Panel>
      <Tabs.Panel className="tabs-panel" value="billing">
        Invoices and plans.
      </Tabs.Panel>
      <Tabs.Panel className="tabs-panel" value="account">
        Profile and preferences.
      </Tabs.Panel>
    </Tabs.Root>
  )
}

457Tests passing in React · 0 failing

16.0 KiBSize

Not measured yetMemory

Not measured yetSpeed

productdevbook and 15 upstream authors10 commits · last Nov 4

Installation

npm i @hamur/react

Not on npm yet. The package goes out under the chosen name.

Anatomy

Import the component and assemble its parts:

<Tabs.Root>
  <Tabs.List>
    <Tabs.Tab />
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Panel />
</Tabs.Root>

Examples

Animated Panels

Panels slide in from the side given by data-activation-direction.

TabsAnimatedPanels.tsx

import { Tabs } from '@hamur/react/tabs'

export default function TabsAnimatedPanelsExample() {
  return (
    <Tabs.Root className="tabs" defaultValue="overview">
      <Tabs.List className="tabs-list">
        <Tabs.Tab className="tab" value="overview">
          Overview
        </Tabs.Tab>
        <Tabs.Tab className="tab" value="projects">
          Projects
        </Tabs.Tab>
        <Tabs.Tab className="tab" value="account">
          Account
        </Tabs.Tab>
        <Tabs.Indicator className="tabs-indicator" />
      </Tabs.List>
      <div className="tabs-panel-viewport">
        <Tabs.Panel className="tabs-panel tabs-panel-slide" value="overview">
          <p>Workspace stats and activity.</p>
        </Tabs.Panel>
        <Tabs.Panel className="tabs-panel tabs-panel-slide" value="projects">
          <p>Milestones and deadlines.</p>
        </Tabs.Panel>
        <Tabs.Panel className="tabs-panel tabs-panel-slide" value="account">
          <p>Profile and preferences.</p>
        </Tabs.Panel>
      </div>
    </Tabs.Root>
  )
}

API reference

12 props across 5 parts, in React syntax. className, style, render are listed once, under Shared props.

Indicator`Tabs.Indicator`

A visual indicator that can be styled to match the position of the currently active tab. Renders a <span>.

Indicator props
Prop	Type	Default
`renderBeforeHydration`Whether to render itself before React hydrates.	`boolean`	`false`

Indicator data attributes
Data attribute	Description
`data-activation-direction`	Indicates the direction of the activation (based on the previous active tab).
`data-orientation`	Indicates the orientation of the tabs.

Indicator CSS variables
CSS variable	Description
`--active-tab-left`	Indicates the distance on the left side from the parent's container if the tab is active.
`--active-tab-right`	Indicates the distance on the right side from the parent's container if the tab is active.
`--active-tab-top`	Indicates the distance on the top side from the parent's container if the tab is active.
`--active-tab-bottom`	Indicates the distance on the bottom side from the parent's container if the tab is active.
`--active-tab-width`	Indicates the width of the tab if it is active.
`--active-tab-height`	Indicates the height of the tab if it is active.

List`Tabs.List`

Groups the individual tab buttons. Renders a <div>.

List props
Prop	Type	Default
`activateOnFocus`Whether to automatically change the active tab on arrow key focus.	`boolean`	`false`
`loopFocus`Whether to loop keyboard focus back to the first item	`boolean`	`true`

List data attributes
Data attribute	Description
`data-activation-direction`	Indicates the direction of the activation (based on the previous active tab).
`data-orientation`	Indicates the orientation of the tabs.

Panel`Tabs.Panel`

A panel displayed when the corresponding tab is active. Renders a <div>.

Panel props
Prop	Type	Default
`value`requiredThe value of the TabPanel.	`any`	`—`
`keepMounted`Whether to keep the HTML element in the DOM while the panel is hidden.	`boolean`	`false`

Panel data attributes
Data attribute	Description
`data-index`	Indicates the index of the tab panel.
`data-activation-direction`	Indicates the direction of the activation (based on the previous active tab).
`data-orientation`	Indicates the orientation of the tabs.
`data-hidden`	Present when the panel is hidden.
`data-starting-style`	Present when the panel begins animating in.
`data-ending-style`	Present when the panel is animating out.

Root`Tabs.Root`

Groups the tabs and the corresponding panels. Renders a <div>.

Root props
Prop	Type	Default
`defaultValue`The default value.	`any`	`0`
`value`The value of the currently active `Tab`.	`any`	`—`
`onValueChange`Callback invoked when new value is being set.	`((value: any, eventDetails: TabsRootChangeEventDetails) => void)`	`—`
`orientation`The component orientation (layout flow direction).	`Orientation`	`'horizontal'`

Root data attributes
Data attribute	Description
`data-activation-direction`	Indicates the direction of the activation (based on the previous active tab).
`data-orientation`	Indicates the orientation of the tabs.

Tab`Tabs.Tab`

An individual interactive tab button that toggles the corresponding panel. Renders a <button>.

Tab props
Prop	Type	Default
`value`requiredThe value of the Tab.	`any`	`—`
`nativeButton`Whether the component renders a native `<button>` element when replacing it	`boolean`	`true`
`disabled`Whether the Tab is disabled.	`boolean`	`—`

Tab data attributes
Data attribute	Description
`data-activation-direction`	Indicates the direction of the activation (based on the previous active tab).
`data-orientation`	Indicates the orientation of the tabs.
`data-disabled`	Present when the tab is disabled.
`data-active`	Present when the tab is active.

Shared props

Every part that renders an element takes these.

Shared props
Prop	Type
`className`CSS class applied to the element, or a function that returns a class based on the component's state.	`string \| ((state: State) => string \| undefined)`
`style`Style applied to the element, or a function that returns a style object based on the component's state.	`React.CSSProperties \| ((state: State) => React.CSSProperties \| undefined)`
`render`Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, State>`

Keyboard and accessibility

Keyboard

Keyboard
Keys	Does	Part
`ArrowRightArrowLeft`	Moves focus to the next or previous tab without activating it (`ArrowDown` and `ArrowUp` when vertical)	List
`ArrowRightArrowLeft`	With `activateOnFocus`, moves focus and activates the tab	List
`ArrowRight`	From the last tab, wraps to the first while `loopFocus` is on	List
`Home`	Moves focus to the first tab	List
`End`	Moves focus to the last tab	List
`EnterSpace`	Activates the focused tab	Tab

Accessibility

What the parts set
Part	Sets	So that
List	`role="tablist"`, `aria-orientation="vertical"` when vertical	a screen reader announces a set of tabs and which arrow keys move in it
Tab	`role="tab"`, `aria-selected`, `aria-controls` to its panel	each tab is read with its state and tied to its panel
Panel	`role="tabpanel"`, `aria-labelledby` to its tab	the panel is read with the tab's name
Panel	`tabindex="0"` while active	keyboard users can reach a panel that has no focusable content
Indicator	`role="presentation"`	the moving highlight is not read

Focus order

The list is one tab stop: the active tab.
Arrow keys, Home and End move between tabs; Enter or Space activates one unless activateOnFocus is on.
The active Panel has tabindex="0", so the next Tab reaches it when it has no focusable content.