The `` component provides a wrapper around the `` component that
implements the accessibility requirements of a
[tablist](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
This component has been created for use:
-
inside the
<TabsProvider /> component (Controlled)
-
outside the
<TabsProvider /> component (Uncontrolled)
## Controlled (where the `` is inside a `` component)
Controlled adds all the active properies required for a11y automatically on `` children and it
also provides orientation based keyboard navigation.
`` adds the following properties to `` children:
| Prop | Value |
| --------------- | -------------------------------------------------------- |
| `id` | A unique id for the tab |
| `role` | `tab` |
| `tabindex` | If `` has active prop equal to true: `0`; else `-1` |
| `onPress` | Calls `onTabSelection` if not defined on `` |
| `active` | `Tabs.selectedTab = Tab.key` |
| `aria-selected` | String version of `active` |
| `aria-controls` | If tab is active, the id of the related `tabpanel` |
### Example Implementation
```tsx
// Example
const [selectedTab, setSelectedTab] = useState('tab-1');
return (
{/* Controlled: you don't have to define any of state based properties */}
Tab 1
Tab 2
Tab 3
);
```
## Uncontrolled (where the `` is outside of a `` component)
Uncontrolled requires the developer to update the active properties required for a11y. The only
functionality `` provides in this state is orientation based keyboard navigation. This uses
the `active` property of the ``s to determine where the keyboard focus should be.
`` adds the following properties to `` children:
| Prop | Value |
| ---------- | -------------------------------------------------------- |
| `role` | `tab` |
| `tabindex` | If `` has active prop equal to true: `0`; else `-1` |
| `onPress` | Calls `onTabSelection` if not defined on `` |
### Example Implementation
```tsx
// Example
const [selectedTab, setSelectedTab] = useState('tab-1');
return (
Tab 1
Tab 2
Tab 3
);
```