Navigation

SegmentedTabs

A segmented tab group with arrow-key navigation and switchable panels.

SegmentedTabsView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

Overview of the project.

tsx

import { Cell } from "retend";

import { SegmentedTabs } from "innate-ui";

type Tab = "overview" | "activity" | "settings";

export function SegmentedTabsDemo() {
  const tab = Cell.source<Tab>("overview");
  return (
    <SegmentedTabs id="segmented-tabs-demo" value={tab} onChange={(value) => tab.set(value)}>
      <SegmentedTabs.List ariaLabel="Project views">
        <SegmentedTabs.Trigger value="overview">Overview</SegmentedTabs.Trigger>
        <SegmentedTabs.Trigger value="activity">Activity</SegmentedTabs.Trigger>
        <SegmentedTabs.Trigger value="settings" disabled>
          Settings
        </SegmentedTabs.Trigger>
      </SegmentedTabs.List>
      <SegmentedTabs.Content value="overview">Overview of the project.</SegmentedTabs.Content>
      <SegmentedTabs.Content value="activity">Recent activity.</SegmentedTabs.Content>
      <SegmentedTabs.Content value="settings">Project settings.</SegmentedTabs.Content>
    </SegmentedTabs>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

SegmentedTabsProps

Prop	Type	Default
`id`required Stable id used to connect each trigger with its panel.	`string`	`—`
`value`required Currently selected trigger value.	`JSX.ValueOrCell<Value>`	`—`
`children`required `SegmentedTabs.List` and `SegmentedTabs.Content` children.	`JSX.Children`	`—`
`orientation` Layout direction of the trigger list.	`JSX.ValueOrCell<SegmentedTabsOrientation>`	`"horizontal"`
`size` Density of the trigger list.	`JSX.ValueOrCell<SegmentedTabsSize>`	`"medium"`
`activation` Whether arrow-key focus also selects the focused trigger.	`JSX.ValueOrCell<SegmentedTabsActivation>`	`"automatic"`
`onChange` Called when a different trigger is selected.	`(value: Value) => void`	`—`

SegmentedTabsContentProps

Prop	Type	Default
`value`required Trigger value this panel belongs to.	`string`	`—`
`children`required Panel content rendered while its trigger is selected.	`JSX.Children`	`—`

SegmentedTabsListProps

Prop	Type	Default
`children`required `SegmentedTabs.Trigger` children.	`JSX.Children`	`—`
`ariaLabel` Accessible label for the tab list.	`JSX.ValueOrCell<string>`	`—`
`ariaLabelledBy` Id of the element labelling the tab list.	`JSX.ValueOrCell<string \| undefined>`	`—`
`onKeyDown` Key-down handler called before built-in arrow-key navigation.	`EventHandlerProp<HTMLDivElement, KeyboardEvent>`	`—`

SegmentedTabsTriggerProps

Prop	Type	Default
`value`required Value selected when this trigger is activated.	`Value`	`—`
`children`required Visible trigger label or content.	`JSX.Children`	`—`
`disabled` Whether the trigger is disabled.	`JSX.ValueOrCell<boolean>`	`false`
`ref` Receives the trigger button element.	`SourceCell<HTMLButtonElement \| null>`	`—`
`onClick` Click handler called before the trigger is selected.	`EventHandlerProp<HTMLButtonElement, MouseEvent>`	`—`

Inspect the typed source →