For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/components/tabs.md.
A3S UI
  • English
  • next

      • Tabs

      Live previewHTML · CSS · JavaScript

      Account

      Make changes to your account here. Click save when you're done.

      Usage

      Include CSS

      Import Tailwind and one full A3S UI style bundle.

      @import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

      Or import only the base CSS, Tabs component CSS, and one style pack.

      @import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/tabs.css";
@import "@a3s-lab/ui/styles/a3s.css";

      Using CDN or bundler imports? See the Installation page.

      Include JavaScript

      Copy or serve the full A3S UI JavaScript bundle.

      <script src="/assets/js/all.min.js" defer></script>

      Or copy or serve the A3S UI runtime and Tabs script.

      <script src="/assets/js/runtime.min.js" defer></script>
<script src="/assets/js/tabs.min.js" defer></script>

      Using CDN or bundler imports? See the Installation page.

      Add your tabs HTML

      <div class="tabs w-full" id="demo-tabs-with-panels">
  <nav role="tablist" aria-orientation="horizontal" class="w-full">
    <button type="button" role="tab" id="demo-tabs-with-panels-tab-1" aria-controls="demo-tabs-with-panels-panel-1" aria-selected="true" tabindex="0">Account</button>
    <button type="button" role="tab" id="demo-tabs-with-panels-tab-2" aria-controls="demo-tabs-with-panels-panel-2" aria-selected="false" tabindex="-1">Password</button>
  </nav>
  <div role="tabpanel" id="demo-tabs-with-panels-panel-1" aria-labelledby="demo-tabs-with-panels-tab-1" tabindex="-1" aria-selected="true">
    <div class="card">
      <header>
        <h2>Account</h2>
        <p>Make changes to your account here. Click save when you're done.</p>
      </header>
      <section>
        <form class="grid gap-4">
          <div role="group" class="field">
            <label for="demo-tabs-account-name">Name</label>
            <input type="text" id="demo-tabs-account-name" value="Pedro Duarte" />
          </div>
          <div role="group" class="field">
            <label for="demo-tabs-account-username">Username</label>
            <input type="text" id="demo-tabs-account-username" value="@peduarte" />
          </div>
        </form>
      </section>
      <footer>
        <button type="button" class="btn">Save changes</button>
      </footer>
    </div>
  </div>
  <div role="tabpanel" id="demo-tabs-with-panels-panel-2" aria-labelledby="demo-tabs-with-panels-tab-2" tabindex="-1" aria-selected="false" hidden>
    <div class="card">
      <header>
        <h2>Password</h2>
        <p>Change your password here. After saving, you'll be logged out.</p>
      </header>
      <section>
        <form class="grid gap-4">
          <div role="group" class="field">
            <label for="demo-tabs-password-current">Current password</label>
            <input type="password" id="demo-tabs-password-current" />
          </div>
          <div role="group" class="field">
            <label for="demo-tabs-password-new">New password</label>
            <input type="password" id="demo-tabs-password-new" />
          </div>
        </form>
      </section>
      <footer>
        <button type="button" class="btn">Save password</button>
      </footer>
    </div>
  </div>
</div>

      HTML structure

      <div class="tabs">

      Root tabs container. It becomes horizontal or vertical based on the child tablist's aria-orientation.

      <nav role="tablist" aria-orientation="horizontal">

      Tablist containing tab buttons. Set aria-orientation="vertical" for vertical tabs and data-variant="line" for the line style.

      <button role="tab" id="{ TAB_ID }" aria-controls="{ PANEL_ID }" aria-selected="true" tabindex="0">
      Tab trigger. The active tab has aria-selected="true" and tabindex="0". Inactive tabs use tabindex="-1". Disabled tabs use disabled or aria-disabled="true".
      <div role="tabpanel" id="{ PANEL_ID }" aria-labelledby="{ TAB_ID }">
      Panel controlled by a tab. Inactive panels are hidden.

      JavaScript API

      APITypeDescription
      tabs.select(tab)MethodSelects a tab button in the tablist.
      tabs.refresh()MethodRescans tabs and panels after children change inside the existing tablist/panel structure.

      Horizontal tablists keep their own overflow boundary and scroll the selected tab into view. Arrow keys follow visual order, including reversed left/right movement in RTL; Home and End select the first and last enabled tabs.

      Examples

      Line

      Live previewHTML · CSS · JavaScript
      Overview content.

      Vertical

      Live previewHTML · CSS · JavaScript
      Account content.

      Disabled

      Live previewHTML · CSS · JavaScript
      Home content.

      Icons

      Live previewHTML · CSS · JavaScript
      Preview content.

      RTL

      To enable RTL support, set dir="rtl" on the tabs root or a parent element.

      Live previewHTML · CSS · JavaScript

      نظرة عامة

      عرض مقاييسك الرئيسية وأنشطة المشروع الأخيرة. تتبع التقدم عبر جميع مشاريعك النشطة.

      لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.