npm package: @paprika/tabs
Description: Tabs component displays tabs with panels associated with each tab
Author: @paprika
Latest version: 2.3.14

<!-- start: Autogenerated - do not modify -->

# @paprika/tabs

## Description

Tabs component displays tabs with panels associated with each tab

## Installation

```
yarn add @paprika/tabs
```

or with npm:

```
npm install @paprika/tabs
```

## Props

### Tabs

| Prop               | Type                                                  | required | default                 | Description                                                                                                                                                                         |
| ------------------ | ----------------------------------------------------- | -------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| a11yText           | string                                                | false    | null                    | Description of the purpose of the tabs for assistive technology.                                                                                                                    |
| children           | node                                                  | true     | -                       | Expects Tabs.List (mandatory) and Tabs.Panels (optional).                                                                                                                           |
| defaultIndex       | number                                                | false    | undefined               | Sets what tabindex is active by default (uncontrolled component). Use null for no active tab.                                                                                       |
| hasInsetFocusStyle | bool                                                  | false    | false                   | If the visual focus ring for the tabs should be displayed with an inset style.                                                                                                      |
| hasTruncation      | bool                                                  | false    | false                   | Tab labels will be truncated when they run out of space instead of breaking to multiple lines (ignored when isVertical is false).                                                   |
| index              | number                                                | false    | undefined               | Sets what tabindex is active (controlled component). Use null for no active tab.                                                                                                    |
| isDisabled         | bool                                                  | false    | false                   | If the tabs are all disabled.                                                                                                                                                       |
| isVertical         | bool                                                  | false    | false                   | If the tabs are stacked vertically.                                                                                                                                                 |
| kind               | [ Tabs.types.kind.PRIMARY, Tabs.types.kind.SECONDARY] | false    | Tabs.types.kind.PRIMARY | The visual theme of the tabs list.                                                                                                                                                  |
| onClickTab         | func                                                  | false    | null                    | Use this prop when you want to use Tabs as a controlled component (also you must use 'index' prop). When the user clicks on a tab, this gets fired (the tab index is passed to it). |
| size               | [ Tabs.types.size.MEDIUM, Tabs.types.size.LARGE]      | false    | Tabs.types.size.MEDIUM  | Size of the tab label text.                                                                                                                                                         |
| tabHeight          | [number,string]                                       | false    | 48                      | Height of the tabs (ignored when isVertical is true). A number value will be interpreted as height in pixels.                                                                       |

### Tabs.List

| Prop     | Type | required | default | Description                |
| -------- | ---- | -------- | ------- | -------------------------- |
| children | node | true     | -       | List of Tabs.Tab elements. |

### Tabs.Panel

| Prop          | Type | required | default | Description                                    |
| ------------- | ---- | -------- | ------- | ---------------------------------------------- |
| children      | node | false    | null    |                                                |
| isSelected    | bool | false    | false   | Controls if the option is selected or not      |
| shouldUnmount | bool | false    | true    | Should unmount or not when isSelected is false |

### Tabs.Panels

| Prop     | Type | required | default | Description                  |
| -------- | ---- | -------- | ------- | ---------------------------- |
| children | node | true     | -       | List of Tabs.Panel elements. |

### Tabs.Tab

| Prop            | Type   | required | default  | Description                                                                                |
| --------------- | ------ | -------- | -------- | ------------------------------------------------------------------------------------------ |
| a11yText        | string | false    | null     | Descriptive text for assistive technologies. By default text of the children will be used. |
| children        | node   | false    | null     | Label for the tab                                                                          |
| hasFocus        | bool   | false    | false    | Internal only: if tab has focus                                                            |
| href            | string | false    | null     | Sets a url the tab goes to                                                                 |
| isDisabled      | bool   | false    | false    | If the tab is disabled                                                                     |
| isSelected      | bool   | false    | false    | Internal only: if tab is selected                                                          |
| onClick         | func   | false    | () => {} | Internal only: callback onClick                                                            |
| onKeyDownArrows | func   | false    | () => {} | Internal only: callback onKeyDownArrow                                                     |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

## Usage

```js
import Tabs from "@paprika/tabs";

<Tabs>
  <Tabs.List>
    <Tabs.Tab>Hello</Tabs.Tab>
    <Tabs.Tab isDisabled>World</Tabs.Tab>
    <Tabs.Tab>ABC</Tabs.Tab>
    <Tabs.Tab isDisabled>Disabled Tab</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panels>
    <Tabs.Panel>Hello Tab</Tabs.Panel>
    <Tabs.Panel>Disabled tab 2</Tabs.Panel>
    <Tabs.Panel>ABC Tab</Tabs.Panel>
    <Tabs.Panel>Disabled tab 4</Tabs.Panel>
  </Tabs.Panels>
</Tabs>;
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/navigation-tabs--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Tabs/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/tabs%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/Tabs/CHANGELOG.md)