Tabs

Tabs choose which panel is shown. The strip is one tab stop: the arrow keys move between tabs, and Enter or Space shows the one with focus. Home and End go to the ends, and a disabled tab is skipped. The chosen tab is styled from aria-selected, which is what a reader is told.

DetailsShippingReturns

A universal UI compiler, written in Rust.

TabsDemo.tsx

import { View } from '@hozo/core'
import { Tabs } from '@hozo/ui'

const PANELS = [
  { label: 'Details', content: 'A universal UI compiler, written in Rust.' },
  { label: 'Shipping', content: 'Two days, or four to an island.' },
  { label: 'Returns', content: 'Not yet.', disabled: true },
]

export function TabsDemo() {
  return (
    <View className="w-full max-w-md">
      <Tabs tabs={PANELS} accessibilityLabel="Product" />
    </View>
  )
}

• tabs: { label, content, disabled? } for each tab.
• index and onIndexChange, or defaultIndex for uncontrolled tabs.
• accessibilityLabel: the strip’s name.
• orientation: horizontal (the default) or vertical, which puts the strip beside the panel.

Use a segmented control instead when a value is being chosen and nothing below changes.