Tab

The Tab component provides a way to organize content into different sections, each accessible through a tab. It includes the TabItem subcomponent for defining the content of each tab.

Import

To use the Tab component, first import it into your project: 

---
import { Tab, TabItem } from 'free-astro-components'
---

Usage

Here’s how you can use the Tab component in your Astro project:

Basic Usage

The Tab component requires a tabs attribute to define the tab labels and their active state. Each tab is associated with a corresponding TabItem component.

Content for Tab 1

In the above example, Tab 1 is marked as active by setting active: true in the tabs array, and the corresponding TabItem also has the active attribute.

Props

Tab

tabs { label: string, active?: boolean }[] An array of objects defining the tabs. Each object should have a label for the tab title and an optional active boolean to indicate the active tab. [{ label: 'tab 1', active: true }, { label: 'tab 2' }]
children TabItem | TabItem[] The TabItem components that correspond to each tab. -
class string CSS class for custom styling. -

TabItem

active boolean Indicates whether the tab is active. false
children any The content to display when the tab is active. -
class string CSS class for custom styling. -

Accessibility

  • Keyboard Navigation: Ensure that the tab list is navigable using the keyboard. Users should be able to move focus between tabs using the arrow keys.

  • ARIA Attributes: Use aria-controls to link each tab with its corresponding panel and aria-selected to indicate the active tab.