---
name: ContentSwitch
route: /ContentSwitch
menu: components
---

import { Playground, Props } from 'docz'
import { ContentSwitch } from './ContentSwitch'

# ContentSwitch

<Props of={ContentSwitch} />

## Usage

<Playground>
  {() => {
    const [state, setState] = React.useState(0)

    return (
      <ContentSwitch>
        <ContentSwitch.Option label='Inventory' onClick={() => setState(0)} isActive={state === 0}>
          {() => (
            <p>You've selected Inventory.</p>
          )}
        </ContentSwitch.Option>

        <ContentSwitch.Option label='Orders' onClick={() => setState(1)} isActive={state === 1}>
          {() => (
            <p>You've selected Orders.</p>
          )}
        </ContentSwitch.Option>
      </ContentSwitch>
    )

}}

</Playground>
