Tabs

Tabs switches between panels of content. There are three variants: pill for the top of a page, segment inside a card and plain for small text tabs.

import { Tab, TabList, TabPanel, Tabs } from '@beyul/sulmu-ui'

Source · Figma

Examples

Pill

The default. It sits on the page canvas.

Users panel

import { Tab, TabList, TabPanel, Tabs } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Tabs defaultValue="users">
      <TabList>
        <Tab value="users">Users</Tab>
        <Tab value="groups">Groups</Tab>
        <Tab value="teams">Teams</Tab>
        <Tab value="roles" disabled>
          Roles
        </Tab>
      </TabList>
      <TabPanel value="users">Users panel</TabPanel>
      <TabPanel value="groups">Groups panel</TabPanel>
      <TabPanel value="teams">Teams panel</TabPanel>
    </Tabs>
  )
}

Segment

Full width, for use inside a card.

Details panel

import { Tab, TabList, TabPanel, Tabs } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Tabs variant="segment" defaultValue="details" style={{ maxWidth: 380 }}>
      <TabList>
        <Tab value="details">Details</Tab>
        <Tab value="activity">Activity</Tab>
        <Tab value="notes">Notes</Tab>
      </TabList>
      <TabPanel value="details">Details panel</TabPanel>
      <TabPanel value="activity">Activity panel</TabPanel>
      <TabPanel value="notes">Notes panel</TabPanel>
    </Tabs>
  )
}

Plain

Open deals

import { Tab, TabList, TabPanel, Tabs } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Tabs variant="plain" defaultValue="open">
      <TabList>
        <Tab value="open">Open</Tab>
        <Tab value="won">Won</Tab>
        <Tab value="lost">Lost</Tab>
      </TabList>
      <TabPanel value="open">Open deals</TabPanel>
      <TabPanel value="won">Won deals</TabPanel>
      <TabPanel value="lost">Lost deals</TabPanel>
    </Tabs>
  )
}

Props

Tabs

Prop	Type	Default	Description
`variant`	`"pill" \| "segment" \| "plain"`	`pill`	pill: page-level (default). segment: inside a card, full width. plain: small text tabs.
`defaultValue`	`string \| null`	-	The initial selected tab value when rendered. Use when you don't need to control the selected tab value.
`value`	`string \| null`	-	The controlled selected tab value
`onValueChange`	`((details: ValueChangeDetails) => void)`	-	Callback to be called when the selected/active tab changes

Tab

Prop	Type	Default	Description
`value`	`string \| null`	-	The controlled selected tab value
`disabled`	`boolean`	-	Whether the tab is disabled

TabPanel

Prop	Type	Default	Description
`value`	`string \| null`	-	The controlled selected tab value

TabList has no props of its own. The remaining props of Ark UI’s Tabs parts are accepted too.

Accessibility and usage

The value of a Tab and its TabPanel must match.
Arrow keys move between tabs; disabled tabs are skipped.
Set variant on Tabs only; the list, tabs and panels follow it.
To use tabs for routing, control value from the route and navigate in onValueChange.