@personio/ui-docs/components/tab/tab.mdx

---
name: Tab
menu: Components
route: /components/Tab
---

import { Playground, PropsTable } from 'docz'
import { Tab } from '@personio/ui-components'
import { State, Toggle } from 'react-powerplug'

# Tab

<PropsTable of={Tab} />

## Example

<Playground>
  <div>
    <State initial={{ value: 'personal' }}>
      {({ state, setState }) => (
        <Tab value={state.value} onChange={(value) => {
          setState({ value })
        }}>
          <Tab.Item name="personal">Personal Data</Tab.Item>
          <Tab.Item name="salary">Salary Data</Tab.Item>
          <Tab.Item name="absences">Absences</Tab.Item>
        </Tab>
      )}
    </State>
  </div>
</Playground>

## Disabled

<Playground>
  <div>
    <State initial={{ value: 'personal' }}>
      {({ state, setState }) => (
        <Tab value={state.value} onChange={(value) => {
          setState({ value })
        }}>
          <Tab.Item name="personal">Personal Data</Tab.Item>
          <Tab.Item name="salary" disabled>Salary Data</Tab.Item>
          <Tab.Item name="absences">Absences</Tab.Item>
        </Tab>
      )}
    </State>
  </div>
</Playground>