Tabs

A tabbed interface component with two keyboard navigation modes: focus-only or select-on-navigation.

import { Tabs, T } from '@kaynora/ui'

export default function () {
  return (
    <Tabs defaultValue='one'>
      <Tabs.Tab value='one' label='One'><T>Content one</T></Tabs.Tab>
      <Tabs.Tab value='two' label='Two'><T>Content two</T></Tabs.Tab>
    </Tabs>
  )
}

Setting navigation to 'focus' keeps focus separate from selection, while 'select' changes the active tab during keyboard navigation.

import { Tabs } from '@kaynora/ui'

export default function () {
  return (
    <div style={{
      display: 'flex',
      flexFlow: 'column',
      gap: '40px',
    }}>
      <Tabs navigation='focus' defaultValue='a'>
        <Tabs.Tab value='a' label='A'><T>Focus nav</T></Tabs.Tab>
        <Tabs.Tab value='b' label='B'><T>Focus nav</T></Tabs.Tab>
      </Tabs>

      <Tabs navigation='select' defaultValue='a'>
        <Tabs.Tab value='a' label='A'><T>Select nav</T></Tabs.Tab>
        <Tabs.Tab value='b' label='B'><T>Select nav</T></Tabs.Tab>
      </Tabs>
    </div>
  )
}

The size prop determines the amount of padding on the tab control buttons.

import { Tabs } from '@kaynora/ui'

export default function () {
  return (
    <div style={{
      display: 'flex',
      flexFlow: 'column',
      gap: '40px',
    }}>
      <Tabs size='s' defaultValue='one'>
        <Tabs.Tab value='one' label='One'><T>Small</T></Tabs.Tab>
        <Tabs.Tab value='two' label='Two'><T>Small</T></Tabs.Tab>
      </Tabs>

      <Tabs size='m' defaultValue='one'>
        <Tabs.Tab value='one' label='One'><T>Medium</T></Tabs.Tab>
        <Tabs.Tab value='two' label='Two'><T>Medium</T></Tabs.Tab>
      </Tabs>

      <Tabs size='l' defaultValue='one'>
        <Tabs.Tab value='one' label='One'><T>Large</T></Tabs.Tab>
        <Tabs.Tab value='two' label='Two'><T>Large</T></Tabs.Tab>
      </Tabs>
    </div>
  )
}

<Tabs />

ReactElement<Tabs.Tab> | ReactElement<Tabs.Tab>[]

'focus' | 'select'

's' | 'm' | 'l'

string

string

(value: string) => void

{
  root: HTMLDivElementProps
  header: HTMLDivElementProps
  content: HTMLDivElementProps
}

<Tabs.Tab />

string

string

boolean

{
  root: HTMLDivElementProps
  typography: TypographyProps
}