Tabs

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Switch between related panels in the same context. The selected tab shows as a full rounded surface. Set Panel.keepMounted to preserve input.

Don't fake navigation between separate pages with tab state. Use links instead. Don't load slow content on arrow-key focus. Keep the default manual activation instead.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Tabs.Root → List(Tab + Indicator) + value-matched Panels

Keyboard and accessibility

Tab moves focus to the active tab. Arrow keys, Home, and End move focus between tabs. In the default manual mode, Enter or Space activates the focused tab. With List.activateOnFocus=true, a tab activates when it receives focus. Disabled tabs receive focus but don't activate.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Tabs } from '@surflane/ui'

<Tabs.Root defaultValue='overview'>
  <Tabs.List aria-label='Deployment sections'>
    <Tabs.Tab value='overview'>Overview</Tabs.Tab>
    <Tabs.Tab value='logs'>Logs</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value='overview' keepMounted>
    Overview details
  </Tabs.Panel>
  <Tabs.Panel value='logs' keepMounted>
    Build logs
  </Tabs.Panel>
</Tabs.Root>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens