UnreviewedOptional UnreviewedchildrenOptional <TabPanel value="…"> panels, one per tab value. Each is a
self-managing <a-tabpanel> that shows itself when its value is the active
tab. Omit them to use Tabs as a bare selectable strip. To place panels in a
different layout region, or to unmount an inactive panel, drive selection with
a controlled value and render the content yourself (see the docs).
Optional UnreviewedoptionsThe tabs, as a data array (the strip's single source). Each entry is a
TabOption (value, label or children, icon, iconTrailing, tone,
disabled, round, className, style). className and style land on
that option's individual <a-tab>, not on the strip.
Optional UnreviewedvalueControlled active value — the tab value to mark selected (and, when a
<TabPanel value="…"> shares it, the panel to reveal). When set, you own
selection: the strip renders exactly what this says, and a user pick only
requests a change via onStateChange — apply it by updating this prop.
Leave undefined (and use defaultValue) for uncontrolled.
Optional UnrevieweddefaultInitial active value for the uncontrolled case. After first render Tabs
owns selection itself.
Optional UnreviewedonFired whenever the active tab changes — event-first. detail is
{ next, prev } (values; null = none). Cancelable: event.preventDefault()
vetoes it (uncontrolled), or in controlled mode answer by updating value.
Optional UnreviewedonFired after the active tab changes — a native change event.
Optional UnreviewedonLike onChange, but with a { value } snapshot as the 2nd argument.
Optional UnreviewedonFocus entered the strip (any tab) — wired to focusin (focus lands on a tab,
not the tablist).
Optional UnreviewedonFocus left the strip entirely — wired to focusout.
Optional UnreviewedlabelAccessible name for the tablist (aria-label).
Optional UnreviewedpriorityVisual priority. primary is the raised pill on a recessed track (the
segmented-control look); secondary keeps that sizing but drops the track, marking
the selected tab with a subtle active background fill; tertiary is a bottom-underline
indicator under the selected tab (no track, no rest line). tone colors secondary +
tertiary; primary stays neutral.
Optional UnreviewedtoneTone applied to the selected indicator/label, or any literal CSS color for a one-off custom tone (derived in oklch). Named tones track light/dark.
Optional UnreviewedsizeSize — small 24px · medium 28px · large 32px tall, matching Button's scale (the tab's label leading runs a touch tighter, offset by 1px more block padding per side).
Optional UnreviewedorientationLayout + arrow-key axis. Horizontal ellipsizes labels when tabs overflow (scroll is opt-in via CSS); vertical stacks them.
Optional UnreviewedfillMakes horizontal tabs share the available inline space equally.
Optional UnreviewednoslideDisable the sliding indicator. By default the selected-tab indicator animates
between tabs (a single rectangle, via CSS anchor positioning); noslide paints it
per tab so it snaps with no movement. (Browsers without anchor positioning get that
per-tab paint automatically — noslide is the explicit opt-out.)
Optional UnreviewedroundFully-round the tabs, the sliding indicator, and the primary track.
Applies strip-wide; a single tab's round rounds just that tab. A
number (px) or CSS length string sets that radius on all three.
Optional UnrevieweddisabledDisable the whole strip.
Optional UnreviewedclassAdds CSS classes to the root element and preserves its existing classes.
Optional UnreviewedstyleInline CSS styles on the root element.
Optional UnreviewedidHTML id attribute.
Optional UnreviewedtitleHTML title attribute, shown as a browser tooltip on hover.
Optional UnreviewedslotNamed slot in a parent web component, such as slot="header" in a <Dialog>.
Optional UnreviewedtabTab order. Set to -1 to skip the element when tabbing.
Optional UnreviewedkeyReact/Preact reconciliation key when rendered inside a list. Consumed by the JSX runtime (not forwarded as a DOM attribute).
Public props for
<Tabs>.