---
title: Tab
desc: Navigation aid that allows users to switch between different sections or views within the same page.
ico: mdi:tab
keywords:
  - nav

props:
  - class: .prs-tabs
    type: component
    desc: Container
  - class: .prs-tabs-center
    type: modifier
    desc: Justify center
  - class: .prs-tab
    type: part
    desc: For <button>
  - class: .prs-tab_active
    type: state
    desc: Currently active

alert:
  ico: mdi:wheelchair-accessibility
  body: |
    **For best accessibility:**  
    Use **button** tag for tab. Also make sure to use **tabindex="-1"** on inactive tabs and **tabindex="0"** on the active tab so the user can ONLY focus the active tab. You are also responsible for implementing keyboard commands to move the focused tab (arrow left/right, pgup/dn, home/end). The tab and associated tabpanel should activate/follow the active tab. Please use [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role#keyboard_interactions) as a reference for full accessibility requirements.

controls:
  - name: active
    type: toggle
    label: Active
    desc: Selected/Activated tab state.
    default: true
  - name: center
    type: toggle
    label: Centered
    desc: Center tabs within root container.
    default: false
  - name: withBadge
    type: toggle
    label: With badge
    desc: Add a badge to the Tab 2.
    default: false
  - name: state
    type: radio
    label: State
    desc: These states will happen automatically when using valid sematic markup. We do include classes to force hover and focus states but you should avoid using those classes in your application.
    default: default
    options:
      - default
      - hover
      - focus
      - disabled

preview: |
  <div class="border-b border-(--prs-c-gray-300) w-screen max-w-sm [&_button]:-mb-px">
    <div
      role="tablist"
      class="prs-tabs"
      :class="{
        'prs-tabs-center': center
      }"
    >
      <button
        @mousedown.prevent
        @click.prevent
        id="tab-1"
        :tabindex="active ? 0 : -1"
        :aria-selected="active"
        :class="{
          'prs-tab_hover': state === 'hover',
          'prs-tab_focus': state === 'focus',
          'prs-tab_active': active, 
        }
        "
        class="prs-tab"
        role="tab"
        :disabled="state === 'disabled' ? true : false"
      >
        <span>Tab</span>
        <span x-show="withBadge" class="prs-badge">5</span>
      </button>
    </div>
  </div>

code:
  html: |
    <div class="prs-tabs{center}" role="tablist">
      <button class="prs-tab{activeClass}{hover}{focus}" role="tab" tabindex="{activeIndex}"{activeAria}{disabled}>
        Tab{withBadge}
      </button>
    </div>
  logic:
    activeClass: "this.active ? ' prs-tab_active' : ''"
    activeIndex: "this.active ? '0' : '-1'"
    activeAria: "this.active ? ' aria-selected=\"true\"' : ''"
    center: "this.center ? ' prs-tabs-center' : ''"
    withBadge: "this.withBadge ? '\\n    <span class=\"prs-badge\">5</span>' : ''"
    hover: "this.state === 'hover' ? ' prs-tab_hover' : ''"
    focus: "this.state === 'focus' ? ' prs-tab_focus' : ''"
    disabled: "this.state === 'disabled' ? ' disabled' : ''"
---

<div class="not-prose">

  <details class="collapse collapse-arrow border border-base-300">
    <summary class="collapse-title font-semibold flex items-center gap-1.5 select-none"><iconify-icon icon="mdi:keyboard-outline" class="iconify text-current/60 text-xl" noobserver></iconify-icon> Keyboard requirements</summary>
    <div class="collapse-content">
    
| Key | Action |
| --- | ------ |
| **Tab**{ .kbd .kbd-xs .font-mono } | Focus active tab. Additional press moves focus to active tabpanel flow. |
| **→**{ .kbd .kbd-xs .font-mono } | Move focus to/activate next tab. |
| **←**{ .kbd .kbd-xs .font-mono } | Move focus to/activate previous tab. |
| **Home**{ .kbd .kbd-xs .font-mono } | Move focus to last tab. **PGDN**{ .kbd .kbd-xs .font-mono } should also be assigned to this functionality. |
| **End**{ .kbd .kbd-xs .font-mono } | Move focus to first tab. **PGUP**{ .kbd .kbd-xs .font-mono } should also be assigned to this functionality. |

{ .table .table-sm .table-zebra }
    
    </div>
  </details>

</div>