Tabs ✦Documentation has not yet been reviewed by a human.

Tabs renders the strip followed by its panels as siblings, without a wrapper. className, id, style, and extra props apply to the strip. Keep the strip and its panels under the same parent so they can coordinate selection and accessible labels.

The resulting structure is:

<a-tabs role="tablist" aria-label="Settings" default-state="account">
  <a-tab role="tab" value="account" tabindex="0"><a-tab-label>Account</a-tab-label></a-tab>
  <a-tab role="tab" value="security" tabindex="-1"><a-tab-label>Security</a-tab-label></a-tab>
</a-tabs>
<a-tabpanel role="tabpanel" value="account">Account settings</a-tabpanel>
<a-tabpanel role="tabpanel" value="security">Security settings</a-tabpanel>

A horizontal strip and its panels stack in normal flow. For a vertical strip beside its panels, wrap Tabs in a flex row. To place content in a separate layout region, control value and render that content yourself.

Inactive panels stay mounted, preserving form values and scroll position. Choose how they hide with hideMode:

• display (default) removes the inactive panel from layout, keyboard navigation, and the accessibility tree.
• visibility keeps its layout space while hiding its content.

<TabPanel value="activity" hideMode="visibility"><ActivityChart /></TabPanel>

To reset a panel’s state when leaving it, control selection and render only the active panel:

const [tab, setTab] = useState('summary')

<Tabs
  label="Report"
  value={tab}
  onStateChange={(_event, { next }) => { if (next !== null) setTab(next) }}
  options={[
    { value: 'summary', label: 'Summary' },
    { value: 'activity', label: 'Activity' },
  ]}
>
  {tab === 'summary' && <TabPanel value="summary"><Summary /></TabPanel>}
  {tab === 'activity' && <TabPanel value="activity"><ActivityChart /></TabPanel>}
</Tabs>

For expensive panels, track which values have been opened and mount each panel on its first visit. Keep it mounted afterward to preserve its state.

The same controlled pattern lets you place the strip and selected content in separate layout regions. Render the content according to the current value.

The selected tab is in the page’s tab order. Once focus enters the strip, the arrow keys move between enabled tabs (wrapping at the ends), Home / End jump to the first / last, and Space / Enter activate the focused tab; arrow / Home / End navigation activates as it moves (selection follows focus). Disabled tabs are skipped and dropped from the tab order.

Pass label to name the tablist for screen readers. Each TabPanel uses its corresponding tab as its accessible label. Set tabIndex={0} when a text-only panel should receive keyboard focus. When the panel starts with a focusable control, Tab reaches that control directly.

To use Tabs for routes, control value from the current path and navigate in onStateChange. It reports the requested destination before the route changes. The router renders the content, so omit TabPanel children.

<Tabs
  value={pathname}
  onStateChange={(_e, { next }) => next && navigation.navigate(next)}
  options={[
    { value: '/settings/profile', label: 'Profile' },
    { value: '/settings/billing', label: 'Billing' },
  ]}
/>

Swap navigation.navigate for whatever the app uses (router.push, Astro’s navigate, location.assign). Controlling value from the route keeps the right tab active through back/forward and deep links. To guard a switch (unsaved edits), veto it in onStateChange with event.preventDefault().

Use the web component directly when you are not using React or Preact and a native control does not fit.

Use state for controlled selection or default-state for the initial uncontrolled selection. The read-only .value property returns the applied selection. Remove state to release control and retain that selection. User picks update internal state without rewriting authored attributes. Accept a controlled pick through statechange by setting state to event.detail.next. An empty string is a valid option value.

Keep the tab strip and panels as siblings under one parent. Panels read the active value from <a-tabs>. Give the selected tab tabindex="0" and the others tabindex="-1"; <a-tabs> moves focus and selection with the arrow keys, while your change handler updates those attributes for the next visit to the strip. Add tabindex="0" to a text-only panel only when you want the panel itself in the page Tab sequence.

Add fill to make horizontal tabs share the available width equally.

<div>
  <a-tabs role="tablist" default-state="account" fill>
    <a-tab role="tab" value="account" tabindex="0"><a-tab-label>Account</a-tab-label></a-tab>
    <a-tab role="tab" value="security" tabindex="-1"><a-tab-label>Security</a-tab-label></a-tab>
  </a-tabs>
  <a-tabpanel role="tabpanel" value="account">Account settings</a-tabpanel>
  <a-tabpanel role="tabpanel" value="security">Security settings</a-tabpanel>
</div>

const tabs = document.querySelector('a-tabs')

tabs.addEventListener('change', () => {
  for (const tab of tabs.querySelectorAll('a-tab')) {
    tab.tabIndex = tab.getAttribute('value') === tabs.value ? 0 : -1
  }
})

Reach for the props first: tone, size, priority. The focus ring is the global --focus-ring (see Colors).

Use ordinary CSS to style the strip (a-tabs), tabs (a-tab), labels (a-tab-label), and panels (a-tabpanel). The strip’s ::before paints the moving indicator. Unlayered consumer rules override Anta’s defaults. Use properties such as border-radius, padding, and background. Replace the example classes with your own selectors.

Roomier track. The strip hugs its tabs by default (0 padding), so it’s exactly a same-size button tall. For a gap around the selected pill (the classic “well” look), add padding and add the same amount to the tabs’ radius, --tab-radius, so the outer corner stays concentric with the tabs in every theme and size. The strip grows 2×the padding taller.

a-tabs.roomy-1 { padding: 1px; border-radius: calc(var(--tab-radius) + 1px); }
a-tabs.roomy-3 { padding: 3px; border-radius: calc(var(--tab-radius) + 3px); }

Squarer primary. Square corners, heavier labels, and a roomier 4px track with no border or ring on the strip (box-shadow: none drops the default track ring) — just a 1px square ring on the raised pill. The track is <a-tabs>, the sliding pill its ::before:

a-tabs.square-tabs         { border-radius: 0; padding: 4px; box-shadow: none; }  /* no track border / ring */
.square-tabs a-tab         { border-radius: 0; font-weight: 600; }
a-tabs.square-tabs::before { border-radius: 0; box-shadow: 0 0 0 1px light-dark(#cfcfd6, #46464e); }  /* 1px square pill ring */

Tertiary glowing underline. Recolor the sliding underline and add a radial highlight rising from it. The slider is a full-cover box whose border-bottom is the line, so a background gradient on it fills the tab behind the label. Because it’s one element, the glow slides with the line between tabs, with no noslide and no separate per-tab background.

/* The class is on the <a-tabs> element itself, so target a-tabs.glow-tabs (not a descendant).
   The tertiary slider is a full-cover box with a border-bottom line — recolor the border and
   fill it with a gradient; both slide together. Where CSS anchor positioning isn't supported
   there's no slider — tertiary falls back to the per-tab ::after underline (a plain line). */
a-tabs.glow-tabs::before {
  border-bottom-color: light-dark(#8067ff, #907aff);   /* recolor the sliding line */
  background:                                          /* highlight rising from the line, slides with it */
    radial-gradient(80% 100% at 50% 100%,
      color-mix(in oklch, light-dark(#8067ff, #907aff) 30%, transparent), transparent 70%);
}

Scroll instead of ellipsizing. Keep full labels and let the strip scroll horizontally: pin each tab to its content width (flex: none) and make the strip scrollable.

.scroll-tabs a-tabs { overflow-x: auto; scrollbar-width: thin; }
.scroll-tabs a-tab  { flex: none; }

Equal-width tabs. By default tabs are sized to their labels (and compress only when the strip overflows). Pass fill for a segmented-control look where every tab shares the strip width:

<Tabs
  fill
  defaultValue="all"
  label="Filter"
  options={[
    { value: 'all', label: 'All' },
    { value: 'assigned', label: 'Assigned to me' },
    { value: 'recent', label: 'Recent' },
    { value: 'archived', label: 'Archived' },
  ]}
/>

Wrap labels. Let long labels wrap so the tabs grow taller instead of truncating:

.wrap-tabs a-tab,
.wrap-tabs a-tab-label { white-space: normal; text-overflow: clip; overflow: visible; text-align: center; }

Pass noslide to make the selected-tab highlight change without sliding. The highlight also changes without sliding when the browser lacks CSS anchor positioning support.

<Tabs noslide defaultValue="a">…</Tabs>

Rounded corners. The built-in round prop rounds the track, every tab, and the sliding pill together. true makes them full pills; a number (px) or CSS length sets one custom radius for all three:

<Tabs round defaultValue="a" label="Sections">…</Tabs>      {/* pill track + tabs + indicator */}
<Tabs round={8} defaultValue="a" label="Sections">…</Tabs>  {/* 8px on all three */}