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

      • Tabs

      Live preview

      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 preview
      Overview content.

      Vertical

      Live preview
      Account content.

      Disabled

      Live preview
      Home content.

      Icons

      Live preview
      Preview content.

      RTL

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

      Live preview

      نظرة عامة

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

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