import { Meta } from '@storybook/addon-docs';

<Meta title="Components/TabsSlider/Codesandbox" />

# TabsSlider

The TabsSlider component is a linear set of two or more segments, each of which functions as a mutually exclusive button. Within the component, all items are equal width. This control often used to display different views under the same context.

Limit the number of items to improve usability. Wider segments are easier to tap. On phones, the number of items should be limited to four or fewer segments.

**IMPORTANT**: This component uses DOM refs in order to calculate the width of the selected tab indicator. If you are rendering this inside an element with transitions
that affect width, then it may not correctly size the selected indicator initially. In such cases you can wait until the parent element's
transition is complete with `onTransitionEnd` or `onAnimationEnd` before rendering the `TabsSlider`.

A common use case for the TabsSlider as a presentational toggle switch, along with the `TabPanels` component.

```js codesandbox=palmetto-components
import React, { useState } from 'react';
import { TabsSlider, TabPanels, Box } from '@palmetto/palmetto-components';

export default () => {
  const [selectedTab, setSelectedTab] = useState(0);

  return (
    <>
      <Box maxWidth="150px">
        <TabsSlider
          value={selectedTab}
          onChange={(event, index) => {
            setSelectedTab(index);
          }}
          size="sm"
        >
          <TabsSlider.Item>Tab 1</TabsSlider.Item>
          <TabsSlider.Item>Tab 2</TabsSlider.Item>
        </TabsSlider>
      </Box>
      <TabPanels value={selectedTab}>
        <Box padding="lg">Here's the first tab</Box>
        <Box padding="lg">Here's the second tab</Box>
      </TabPanels>
    </>
  );
};
```
