When to use it
Use for two to five peer content views whose panel changes in place. Keep URL history and nested destination navigation in the application router; use Navigation bar for top-level app destinations.
NavigationApple
Tabs
Switch a controlled native content panel from an accessible tab list.
Apple availability
Supported native targets
Import LumenUI in the target that uses this component. iPad support follows the iOS package baseline and uses native iPad layout behavior.
iPhone · iOS 16+iPad · iPadOS 16+Mac · macOS 13+Apple Vision · visionOS 1+
Native example
Use Tabs
Use for two to five peer content views whose panel changes in place. Keep URL history and nested destination navigation in the application router; use Navigation bar for top-level app destinations.
LumenTabs(
"Workspace views",
selection: $activeTab,
options: workspaceTabs
) { selected in
WorkspaceTabPanel(selected)
}Reference
Public API
The primary shared and platform-specific options exposed by LumenTabs.
| API | Values or type | Default | Description |
|---|---|---|---|
| label | String | Required | Names the tab list for assistive technology. |
| options | [LumenSelectionOption<Value>] | Required | Provides stable tab values, short labels, and optional disabled state. |
| selection | Binding<Value> | Required | Stores the active tab. |
| onValueChange | Binding setter | Required | Updates controlled tab selection. |
| content | Native content view | Required | Renders the active panel while Lumen owns the tab list and panel relationship. |
Native behavior
Design and accessibility
Accessibility
Every tab exposes selected and disabled state, the tab list has a readable name, and the active panel is announced when selection changes.
Shared component