TabView
TabView is a view that switches between multiple child views using interactive tabs. TabView provides a tabbed interface for organizing content into separate sections.
TabView is a view that switches between multiple child views using interactive tabs. TabView provides a tabbed interface for organizing content into separate sections.
Examples
Basic Usage
Preview unavailable for this example in the static docs build.
Show code
<TabView items={[
{
label: 'Home',
value: 'home',
content: (
<VStack spacing={20} style={{ padding: '20px' }}>
<Text style={{ fontSize: 24, fontWeight: 'bold' }}>Home</Text>
<Text>Welcome to the home tab</Text>
</VStack>
),
},
{
label: 'Search',
value: 'search',
content: (
<VStack spacing={20} style={{ padding: '20px' }}>
<Text style={{ fontSize: 24, fontWeight: 'bold' }}>Search</Text>
<Text>Search content goes here</Text>
</VStack>
),
},
{
label: 'Profile',
value: 'profile',
content: (
<VStack spacing={20} style={{ padding: '20px' }}>
<Text style={{ fontSize: 24, fontWeight: 'bold' }}>Profile</Text>
<Text>Profile content goes here</Text>
</VStack>
),
},
]}></TabView>With Icons
Preview unavailable for this example in the static docs build.
Show code
<TabView items={[
{
label: 'Home',
value: 'home',
icon: '🏠',
content: (
<VStack spacing={20} style={{ padding: '20px' }}>
<Text>Home Content</Text>
</VStack>
),
},
{
label: 'Favorites',
value: 'favorites',
icon: '⭐',
content: (
<VStack spacing={20} style={{ padding: '20px' }}>
<Text>Favorites Content</Text>
</VStack>
),
},
{
label: 'Settings',
value: 'settings',
icon: '⚙️',
content: (
<VStack spacing={20} style={{ padding: '20px' }}>
<Text>Settings Content</Text>
</VStack>
),
},
]}></TabView>Top Tab Bar
Preview unavailable for this example in the static docs build.
Show code
<TabView tabBarPosition="top" items={[
{
label: 'Tab 1',
value: 'tab-1',
content: (
<VStack spacing={20} style={{ padding: '20px' }}>
<Text>Tab 1 Content</Text>
</VStack>
),
},
{
label: 'Tab 2',
value: 'tab-2',
content: (
<VStack spacing={20} style={{ padding: '20px' }}>
<Text>Tab 2 Content</Text>
</VStack>
),
},
{
label: 'Tab 3',
value: 'tab-3',
content: (
<VStack spacing={20} style={{ padding: '20px' }}>
<Text>Tab 3 Content</Text>
</VStack>
),
},
]}></TabView>Controlled TabView
Preview unavailable for this example in the static docs build.
Show code
function ControlledTabView() {
const [selection, setSelection] = useState('tab-1')
return (
<div>
<div style={{ padding: '10px', marginBottom: '10px' }}>
<Button
onClick={() =>
setSelection((prev) => {
if (prev === 'tab-1') return 'tab-2'
if (prev === 'tab-2') return 'tab-3'
return 'tab-1'
})
}
>
Next Tab
</Button>
<Text style={{ marginLeft: '10px' }}>Selected: {selection}</Text>
</div>
<TabView
items={[
{
label: 'Tab 1',
value: 'tab-1',
content: <VStack style={{ padding: '20px' }}><Text>Tab 1</Text></VStack>,
},
{
label: 'Tab 2',
value: 'tab-2',
content: <VStack style={{ padding: '20px' }}><Text>Tab 2</Text></VStack>,
},
{
label: 'Tab 3',
value: 'tab-3',
content: <VStack style={{ padding: '20px' }}><Text>Tab 3</Text></VStack>,
},
]}
selection={selection}
onSelectionChange={(nextSelection) => setSelection(String(nextSelection))}
/>
</div>
)
}Disabled Tabs
Preview unavailable for this example in the static docs build.
Show code
<TabView items={[
{
label: 'Home',
value: 'home',
content: <VStack style={{ padding: '20px' }}><Text>Home</Text></VStack>,
},
{
label: 'Search',
value: 'search',
disabled: true,
content: <VStack style={{ padding: '20px' }}><Text>Search</Text></VStack>,
},
{
label: 'Profile',
value: 'profile',
content: <VStack style={{ padding: '20px' }}><Text>Profile</Text></VStack>,
},
]} defaultSelection="home"></TabView>Tab Badges
Preview unavailable for this example in the static docs build.
Show code
<TabView items={[
{
label: 'Inbox',
value: 'inbox',
badge: 12,
content: <VStack style={{ padding: '20px' }}><Text>Inbox</Text></VStack>,
},
{
label: 'Updates',
value: 'updates',
badge: 'New',
content: <VStack style={{ padding: '20px' }}><Text>Updates</Text></VStack>,
},
{
label: 'Settings',
value: 'settings',
content: <VStack style={{ padding: '20px' }}><Text>Settings</Text></VStack>,
},
]} defaultSelection="inbox"></TabView>API
| Prop | Type | Required | Description |
|---|---|---|---|
items | ITabItem[] | Yes | Tab items |
defaultSelection | TabValue | No | Initial selected tab value for uncontrolled usage. |
selection | TabValue | No | Controlled selected tab value. |
initialIndex | number | No | Legacy uncontrolled index alias. |
selectedIndex | number | No | Legacy controlled index alias. |
onSelectionChange | (selection: TabValue) => void | No | Tab selection change handler. |
tabBarPosition | 'top' | 'bottom' | No | Tab bar position. Default: 'bottom' |
Inherits additional props from Omit<IBaseElementComponent<'div'>, 'children'>.
Overview
TabView is a view that switches between multiple child views using interactive tabs. TabView provides a tabbed interface for organizing content into separate sections.
SwiftUI Correspondence: Similar to SwiftUI's TabView.
With Icons
Add icons to tab items:
Top Tab Bar
Place tab bar at the top:
Controlled TabView
Control tab selection programmatically:
Tab Badges
Use badges to surface counts or short status labels on a tab item:
Notes
- TabView requires an array of items with
labelandcontent - Each item can define a stable
valueused byselectionanddefaultSelection - Each item can opt into
disabledto stay visible but non-selectable - Each item can provide an optional
badgefor counts or short status text - Each item can have an optional
icon - Tab bar can be positioned at
toporbottom(default) - TabView supports controlled mode with
selectionandonSelectionChange - Tabs expose proper
tablist,tab, andtabpanelsemantics - Arrow keys, Home, and End move between enabled tabs
Best Practices
- Clear labels: Use descriptive labels for each tab
- Icons: Use icons to improve visual recognition
- Content: Keep tab content focused and relevant
- Selection: Prefer stable
valueidentifiers over relying on item order - Accessibility: Ensure tabs are keyboard accessible
TableColumn
TableColumn defines a single column inside `Table`, including its header title and row value renderer.
Text
Text is a view that displays one or more lines of read-only text. Use Text to display a string in your app's user interface. The Text view draws a string in a given font, with support for multiple lines, text truncation, and wrapping.