@hashicorp/react-tabs

Tabs

Tabs will render arbitrary tabbed content based on Tab items passed as children.

Example Usage

<Tabs>
  <Tab heading="First Tab">
    <p>First tab content</p>
  </Tab>
  <Tab heading="Second Tab">
    <p>Second tab content</p>
  </Tab>
  <Tab heading="Third Tab">
    <p>Third tab content</p>
  </Tab>
</Tabs>

Component Props

Tabs

Name	Type	Description	Required
children	React.ReactNode	Tab components to render.	true
defaultTabIdx	number	If set, the tab with the specified ID will be active by default. If not set or if the ID does not match, it will default to 0	false
centered	boolean	If true, the tabs are centered in their container, rather than left-aligned	false
fullWidthBorder	boolean	If true, the border line underneath the tabs expands to the full width of the container, rather than being slightly padded from the edges	false

Tab

Name	Type	Description	Required
heading	string	Title of the tab	true
group	string	A unique identifier for a tab 'group' that, when active, all Tabs with this id will become active when one is selected. Note it's necessary to wrap the page with TabProvider for this feature to function.	false
children	React.ReactNode	Content that should render when the associated tab is active.	false