Tabs

Switch between different views using tabbed navigation.

Import


import { Tabs } from '@tidbcloud/uikit'

Basic Usage


import { Tabs } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Tabs defaultValue="gallery">
      <Tabs.List>
        <Tabs.Tab value="gallery">Gallery</Tabs.Tab>
        <Tabs.Tab value="messages">Messages</Tabs.Tab>
        <Tabs.Tab value="settings">Settings</Tabs.Tab>
      </Tabs.List>
 
      <Tabs.Panel value="gallery">Gallery tab content</Tabs.Panel>
      <Tabs.Panel value="messages">Messages tab content</Tabs.Panel>
      <Tabs.Panel value="settings">Settings tab content</Tabs.Panel>
    </Tabs>
  )
}

Controlled


import { useState } from 'react'
import { Tabs } from '@tidbcloud/uikit'
 
function Demo() {
  const [activeTab, setActiveTab] = useState<string | null>('first')
 
  return (
    <Tabs value={activeTab} onChange={setActiveTab}>
      <Tabs.List>
        <Tabs.Tab value="first">First tab</Tabs.Tab>
        <Tabs.Tab value="second">Second tab</Tabs.Tab>
      </Tabs.List>
 
      <Tabs.Panel value="first">First panel</Tabs.Panel>
      <Tabs.Panel value="second">Second panel</Tabs.Panel>
    </Tabs>
  )
}

Vertical Tabs


<Tabs defaultValue="gallery" orientation="vertical">
  <Tabs.List>
    <Tabs.Tab value="gallery">Gallery</Tabs.Tab>
    <Tabs.Tab value="messages">Messages</Tabs.Tab>
  </Tabs.List>
 
  <Tabs.Panel value="gallery">Gallery content</Tabs.Panel>
  <Tabs.Panel value="messages">Messages content</Tabs.Panel>
</Tabs>

Disabled Tab


<Tabs.Tab value="settings" disabled>
  Settings
</Tabs.Tab>

Key Props

Prop	Type	Description
`value`	`string \| null`	Controlled active tab value
`defaultValue`	`string \| null`	Default active tab (uncontrolled)
`onChange`	`(value: string \| null) => void`	Called when active tab changes
`orientation`	`'horizontal' \| 'vertical'`	Tabs orientation
`variant`	`string`	Visual variant
`color`	`MantineColor`	Tab color
`radius`	`MantineRadius`	Border radius
`inverted`	`boolean`	Inverted tabs layout
`keepMounted`	`boolean`	Keep inactive panels mounted
`allowTabDeactivation`	`boolean`	Allow deactivating active tab