Tabs

A set of layered sections of content that display one panel at a time.

tsx

import { Tabs, TabList, Tab, TabPanel } from '@xdev-asia/x-ui-react';

tsx

<Tabs defaultValue="account">
  <TabList>
    <Tab value="account">Account</Tab>
    <Tab value="security">Security</Tab>
    <Tab value="notifications">Notifications</Tab>
  </TabList>
  <TabPanel value="account">Account settings...</TabPanel>
  <TabPanel value="security">Security settings...</TabPanel>
  <TabPanel value="notifications">Notification settings...</TabPanel>
</Tabs>

Props

defaultValue - Initially active tab
value - Controlled active tab
onChange - Tab change callback
variant - 'line' | 'enclosed' | 'pills'

Navigation