Skip to content
Blueprint

Tabs

Tabs are a set of layered sections of content that are displayed individually and toggled through.

 
<Tabs.Root>
  <Tabs.List>
    <Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
    <Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab-1">
    <h1 class="text-xl font-bold">Consequat sint dolor incididunt</h1>
    <p>Ex do nulla elit amet et laboris tempor qui nulla. Sunt amet voluptate enim dolore sit cupidatat. Incididunt ex non minim aliquip sunt eu. Est elit et eu enim sunt enim qui do adipisicing. Culpa veniam laboris nostrud tempor est minim irure fugiat sit aute laborum.</p>
  </Tabs.Content>
  <Tabs.Content value="tab-2">
    <h1 class="text-xl font-bold">Laboris aliquip</h1>
    <p>Veniam eu occaecat cillum ut anim esse minim anim veniam amet quis culpa excepteur aute. Nulla duis nostrud laborum Lorem esse ea consectetur sunt. Ut dolor eu sit ipsum Lorem enim non nisi incididunt in proident aliqua. Sunt cupidatat officia amet quis irure qui tempor ipsum labore deserunt occaecat enim labore id.</p>
  </Tabs.Content>
  <Tabs.Content value="tab-3">
    <h1 class="text-xl font-bold">Amet nisi labore</h1>
    <p>Aliqua occaecat voluptate laborum amet fugiat. Duis dolore exercitation id anim sit ut ipsum occaecat consectetur ullamco dolor consequat occaecat. Aute irure nisi sint minim id ad laboris et sunt do ad pariatur consectetur. </p>
  </Tabs.Content>
</Tabs.Root>

Anatomy

This component is comprised of several elements that work together to create a tablist. The following are the elements that make up the Tabs component.

---
import Tabs from '@/components/navigation/tabs/Tabs'
---


<Tabs.Root>
  <Tabs.List>
    <Tabs.Trigger />
  </Tabs.List>
  <Tabs.Content />
</Tabs.Root>

API Reference

Root

The root element of the Tabs component. This element wraps the tablist and content elements and provides the scripting logic to toggle between tabs.

Prop Type Default
defaultValue
string —

List

The list element of the Tabs component. This element wraps the tab trigger elements and is based on the <ul> element and can take in any generic HTML attributes.

Trigger

The trigger element of the Tabs component. This component is based on the <button> element and can take in any additional HTML attributes. The following are the custom props that can be passed to the component.

Prop Type Default
value *
string —

Content

The content element of the Tabs component. This component is based on the <div> element and can take in any additional HTML attributes. The following are the custom props that can be passed to the component.

Prop Type Default
value *
string —

Accessibility

The <Tabs> component has some predefined accessibility features that are important to consider when implementing it in your project. The following are some of the key accessibility features that are included in the component:

  • The component uses aria attributes to establish a clear association between the content and the tabs.
  • When a tab is activated, the corresponding content is brought into focus, enhancing the experience for users relying on keyboard navigation.
  • The component includes a hidden jump link within the content field that points back to the tab trigger.

Examples

Change the Default Tab

You can change the default tab that is opened when the component is first rendered by using the defaultValue prop on the <Tabs.Root> component.

 
<Tabs.Root defaultValue="tab-2">
  <Tabs.List>
    <Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
    <Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab-1">
    <h1 class="text-xl font-bold">Consequat sint dolor incididunt</h1>
    <p>Ex do nulla elit amet et laboris tempor qui nulla. Sunt amet voluptate enim dolore sit cupidatat. Incididunt ex non minim aliquip sunt eu. Est elit et eu enim sunt enim qui do adipisicing. Culpa veniam laboris nostrud tempor est minim irure fugiat sit aute laborum.</p>
  </Tabs.Content>
  <Tabs.Content value="tab-2">
    <h1 class="text-xl font-bold">Laboris aliquip</h1>
    <p>Veniam eu occaecat cillum ut anim esse minim anim veniam amet quis culpa excepteur aute. Nulla duis nostrud laborum Lorem esse ea consectetur sunt. Ut dolor eu sit ipsum Lorem enim non nisi incididunt in proident aliqua. Sunt cupidatat officia amet quis irure qui tempor ipsum labore deserunt occaecat enim labore id.</p>
  </Tabs.Content>
  <Tabs.Content value="tab-3">
    <h1 class="text-xl font-bold">Amet nisi labore</h1>
    <p>Aliqua occaecat voluptate laborum amet fugiat. Duis dolore exercitation id anim sit ut ipsum occaecat consectetur ullamco dolor consequat occaecat. Aute irure nisi sint minim id ad laboris et sunt do ad pariatur consectetur. </p>
  </Tabs.Content>
</Tabs.Root>

Astro Component

It’s recommended that an element like this is made as a reusable component. In this case, we have put together the following Astro compound component to serve as a blueprint for how you could possibly set up a Tabs component, and what properties and accessibility to consider.

Tabs.ts
import Root from './Root.astro'
import List from './List.astro'
import Trigger from './Trigger.astro'
import Content from './Content.astro'


export default Object.assign({ Root, List, Trigger, Content })