Implementation:OpenHands OpenHands Tabs

Knowledge Sources	OpenHands
Domains	UI_Components, React
Last Updated	2026-02-11 21:00 GMT

Overview

A compound tab navigation component with ARIA roles, automatic overflow detection, and scroll buttons.

Description

The Tabs component provides a tabbed navigation interface using a compound component pattern (Tabs.Item). It automatically detects when the tab list overflows its container and displays scroll buttons to allow horizontal navigation through the tabs. The component implements proper ARIA tablist and tabpanel roles for accessibility. Each Tabs.Item corresponds to a tab and its associated content panel. The source file is 102 lines long.

Usage

Use the Tabs component to organize content into multiple views where only one view is visible at a time. It is appropriate for settings pages with categories, multi-panel editors, and any interface where content is logically grouped into distinct sections.

Code Reference

Source Location

openhands-ui/components/tabs/Tabs.tsx (102 lines)

Signature

interface TabsProps {
  children: React.ReactNode;
}

// Compound child component
interface TabsItemProps {
  label: string;
  children: React.ReactNode;
}

// Usage: Tabs.Item

Import

import { Tabs } from "@openhands/ui";

I/O Contract

Inputs (Props)

Prop	Type	Required	Default	Description
`children`	`React.ReactNode` (expects `Tabs.Item` elements)	Yes	—	The tab items to render, each defining a tab label and its content panel.

Tabs.Item Props:

Prop	Type	Required	Default	Description
`label`	`string`	Yes	—	The text displayed on the tab button.
`children`	`React.ReactNode`	Yes	—	The content rendered when this tab is active.

Outputs

Renders an ARIA-compliant tab list with tab buttons and a content panel. The active tab's content is displayed below the tab bar. When tabs overflow the container width, left/right scroll buttons appear for navigation.

Usage Examples

import { Tabs } from "@openhands/ui";

function ProjectSettings() {
  return (
    <Tabs>
      <Tabs.Item label="General">
        <p>General project settings go here.</p>
      </Tabs.Item>
      <Tabs.Item label="Permissions">
        <p>Role and permission configuration.</p>
      </Tabs.Item>
      <Tabs.Item label="Integrations">
        <p>Third-party integration settings.</p>
      </Tabs.Item>
      <Tabs.Item label="Advanced">
        <p>Advanced configuration options.</p>
      </Tabs.Item>
    </Tabs>
  );
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment