Tabs

Components

Tabs are used to navigate between related pages or views while retaining context.

The tab component renders a set of Tab Button and Tab Panel components.

import { Tabs } from '@sproutsocial/racine'

() => {
  const [selectedId, setSelectedId] = useState('notifications')

  return (
    <>
      <Tabs
        selectedId={selectedId}
        onSelect={selected => setSelectedId(selected)}
      >
        <Tabs.Button id='notifications'>
          <Box px={500} display='flex' alignItems='center'>
            <Text size='300' weight='600'>Notifications</Text>
          </Box>
        </Tabs.Button>

        <Tabs.Button id='issues'>
          <Box px={500} display='flex' alignItems='center'>
            <Text size='300' weight='600'>Issues</Text>
          </Box>
        </Tabs.Button>
      </Tabs>

      {selectedId === 'notifications' && (
        <Tabs.Panel id='notifications'>
          <Box mt={400}>
            <Text>Notifications panel content goes here.</Text>
          </Box>
        </Tabs.Panel>
      )}

      {selectedId === 'issues' && (
        <Tabs.Panel id='issues'>
          <Box mt={400}>
            <Text>Issues panel content goes here.</Text>
          </Box>
        </Tabs.Panel>
      )}
    </>
  )
}

Properties

Name	Type	Description
`children`	`React.ReactNode`
`onSelect`	`(arg0: string) => void`
`fullWidth`	`boolean`	Whether or not the tabs should stretch to fill the width of their container
`qa`	`object`
`selectedId`	`string`	ID of the selected tab

Subcomponents

Tab Button

A tab button must be rendered within an instance of the Tabs component.

<Tabs>
  <Tabs.Button>
    <Text px={500}>Test</Text>
  </Tabs.Button>
</Tabs>

Tab Panel

A tab panel displays content associated with a specific tab button. The panel's id prop must match the corresponding tab button's id to establish the proper ARIA relationship.

import { Tabs } from '@sproutsocial/racine'

() => {
  const [selectedId, setSelectedId] = useState('tab1')

  return (
    <>
      <Tabs
        selectedId={selectedId}
        onSelect={selected => setSelectedId(selected)}
      >
        <Tabs.Button id='tab1'>
          <Box px={500}>
            <Text size='300' weight='600'>Tab 1</Text>
          </Box>
        </Tabs.Button>
        <Tabs.Button id='tab2'>
          <Box px={500}>
            <Text size='300' weight='600'>Tab 2</Text>
          </Box>
        </Tabs.Button>
      </Tabs>

      {selectedId === 'tab1' && (
        <Tabs.Panel id='tab1'>
          <Box mt={400} p={400}>
            <Text>Content for Tab 1</Text>
          </Box>
        </Tabs.Panel>
      )}

      {selectedId === 'tab2' && (
        <Tabs.Panel id='tab2'>
          <Box mt={400} p={400}>
            <Text>Content for Tab 2</Text>
          </Box>
        </Tabs.Panel>
      )}
    </>
  )
}

Accessibility Features:

Automatically includes role="tabpanel" for proper semantic structure
Sets aria-labelledby to reference the corresponding tab button for screen readers
Panel id generates the proper aria-controls relationship with its tab button (tab button's aria-controls points to {id}-panel)