@antadesign/anta
    Preparing search index...

    Interface ATabsAttributesUnreviewed

    Attributes for the <a-tabs> custom element — the tablist + single-select coordinator. No shadow DOM: <a-tab> children are plain light-DOM, laid out by a-tabs.css, so the strip is restylable with ordinary CSS and usable hand-assembled. Unlike <a-radio-group> it is NOT form-associated (a tablist submits nothing), and the panels live outside it (siblings the Tabs wrapper shows/hides). The element coordinates off-DOM only — selection via each tab's selected property, focus via internals.ariaActiveDescendantElement, scroll via scrollIntoView. Roving tabindex (the JSX path) is rendered by the Tabs wrapper, not the element. For the typed JSX wrapper use Tabs from @antadesign/anta.

    interface ATabsAttributes {
        onClick?: (e: any) => void;
        onDoubleClick?: (e: any) => void;
        onAuxClick?: (e: any) => void;
        onContextMenu?: (e: any) => void;
        onMouseDown?: (e: any) => void;
        onMouseUp?: (e: any) => void;
        onMouseEnter?: (e: any) => void;
        onMouseLeave?: (e: any) => void;
        onMouseMove?: (e: any) => void;
        onMouseOver?: (e: any) => void;
        onMouseOut?: (e: any) => void;
        onPointerDown?: (e: any) => void;
        onPointerUp?: (e: any) => void;
        onPointerMove?: (e: any) => void;
        onPointerEnter?: (e: any) => void;
        onPointerLeave?: (e: any) => void;
        onPointerOver?: (e: any) => void;
        onPointerOut?: (e: any) => void;
        onPointerCancel?: (e: any) => void;
        onGotPointerCapture?: (e: any) => void;
        onLostPointerCapture?: (e: any) => void;
        onTouchStart?: (e: any) => void;
        onTouchEnd?: (e: any) => void;
        onTouchMove?: (e: any) => void;
        onTouchCancel?: (e: any) => void;
        onKeyDown?: (e: any) => void;
        onKeyUp?: (e: any) => void;
        onFocus?: (e: any) => void;
        onBlur?: (e: any) => void;
        onChange?: (e: any) => void;
        onInput?: (e: any) => void;
        onBeforeInput?: (e: any) => void;
        onInvalid?: (e: any) => void;
        onReset?: (e: any) => void;
        onSubmit?: (e: any) => void;
        onSelect?: (e: any) => void;
        onCopy?: (e: any) => void;
        onCut?: (e: any) => void;
        onPaste?: (e: any) => void;
        onCompositionStart?: (e: any) => void;
        onCompositionUpdate?: (e: any) => void;
        onCompositionEnd?: (e: any) => void;
        onDrag?: (e: any) => void;
        onDragStart?: (e: any) => void;
        onDragEnd?: (e: any) => void;
        onDragEnter?: (e: any) => void;
        onDragLeave?: (e: any) => void;
        onDragOver?: (e: any) => void;
        onDrop?: (e: any) => void;
        onScroll?: (e: any) => void;
        onWheel?: (e: any) => void;
        onAnimationStart?: (e: any) => void;
        onAnimationEnd?: (e: any) => void;
        onAnimationIteration?: (e: any) => void;
        onTransitionEnd?: (e: any) => void;
        onLoad?: (e: any) => void;
        onError?: (e: any) => void;
        onAbort?: (e: any) => void;
        onToggle?: (e: any) => void;
        onBeforeToggle?: (e: any) => void;
        onCanPlay?: (e: any) => void;
        onCanPlayThrough?: (e: any) => void;
        onDurationChange?: (e: any) => void;
        onEmptied?: (e: any) => void;
        onEnded?: (e: any) => void;
        onLoadedData?: (e: any) => void;
        onLoadedMetadata?: (e: any) => void;
        onLoadStart?: (e: any) => void;
        onPause?: (e: any) => void;
        onPlay?: (e: any) => void;
        onPlaying?: (e: any) => void;
        onProgress?: (e: any) => void;
        onRateChange?: (e: any) => void;
        onSeeked?: (e: any) => void;
        onSeeking?: (e: any) => void;
        onStalled?: (e: any) => void;
        onSuspend?: (e: any) => void;
        onTimeUpdate?: (e: any) => void;
        onVolumeChange?: (e: any) => void;
        onWaiting?: (e: any) => void;
        key?: string | number | null;
        id?: string;
        class?: string;
        className?: string;
        style?: CSSProperties;
        children?: ReactNode;
        slot?: string;
        tabIndex?: number;
        state?: string;
        "default-state"?: string;
        priority?: "primary" | "secondary" | "tertiary";
        tone?:
            | "neutral"
            | "brand"
            | "info"
            | "success"
            | "warning"
            | "critical"
            | string & {};
        size?: "small"
        | "medium"
        | "large";
        orientation?: "horizontal" | "vertical";
        fill?: boolean | "";
        noslide?: boolean | "";
        disabled?: boolean | "";
        round?: boolean | number | string;
        onstatechange?: (
            e: CustomEvent<{ next: string | null; prev: string | null }>,
        ) => void;
        onchange?: (e: Event) => void;
        onfocusin?: (e: FocusEvent) => void;
        onfocusout?: (e: FocusEvent) => void;
        role?: "tablist";
        "aria-orientation"?: "horizontal" | "vertical";
        "aria-disabled"?: "true" | "false";
        "aria-label"?: string;
    }

    Hierarchy (View Summary)

    Index
    onClick? onDoubleClick? onAuxClick? onContextMenu? onMouseDown? onMouseUp? onMouseEnter? onMouseLeave? onMouseMove? onMouseOver? onMouseOut? onPointerDown? onPointerUp? onPointerMove? onPointerEnter? onPointerLeave? onPointerOver? onPointerOut? onPointerCancel? onGotPointerCapture? onLostPointerCapture? onTouchStart? onTouchEnd? onTouchMove? onTouchCancel? onKeyDown? onKeyUp? onFocus? onBlur? onChange? onInput? onBeforeInput? onInvalid? onReset? onSubmit? onSelect? onCopy? onCut? onPaste? onCompositionStart? onCompositionUpdate? onCompositionEnd? onDrag? onDragStart? onDragEnd? onDragEnter? onDragLeave? onDragOver? onDrop? onScroll? onWheel? onAnimationStart? onAnimationEnd? onAnimationIteration? onTransitionEnd? onLoad? onError? onAbort? onToggle? onBeforeToggle? onCanPlay? onCanPlayThrough? onDurationChange? onEmptied? onEnded? onLoadedData? onLoadedMetadata? onLoadStart? onPause? onPlay? onPlaying? onProgress? onRateChange? onSeeked? onSeeking? onStalled? onSuspend? onTimeUpdate? onVolumeChange? onWaiting? key? id? class? className? style? children? slot? tabIndex? state? default-state? priority? tone? size? orientation? fill? noslide? disabled? round? onstatechange? onchange? onfocusin? onfocusout? role? aria-orientation? aria-disabled? aria-label?
    onClick?: (e: any) => void
    onDoubleClick?: (e: any) => void
    onAuxClick?: (e: any) => void
    onContextMenu?: (e: any) => void
    onMouseDown?: (e: any) => void
    onMouseUp?: (e: any) => void
    onMouseEnter?: (e: any) => void
    onMouseLeave?: (e: any) => void
    onMouseMove?: (e: any) => void
    onMouseOver?: (e: any) => void
    onMouseOut?: (e: any) => void
    onPointerDown?: (e: any) => void
    onPointerUp?: (e: any) => void
    onPointerMove?: (e: any) => void
    onPointerEnter?: (e: any) => void
    onPointerLeave?: (e: any) => void
    onPointerOver?: (e: any) => void
    onPointerOut?: (e: any) => void
    onPointerCancel?: (e: any) => void
    onGotPointerCapture?: (e: any) => void
    onLostPointerCapture?: (e: any) => void
    onTouchStart?: (e: any) => void
    onTouchEnd?: (e: any) => void
    onTouchMove?: (e: any) => void
    onTouchCancel?: (e: any) => void
    onKeyDown?: (e: any) => void
    onKeyUp?: (e: any) => void
    onFocus?: (e: any) => void
    onBlur?: (e: any) => void
    onChange?: (e: any) => void
    onInput?: (e: any) => void
    onBeforeInput?: (e: any) => void
    onInvalid?: (e: any) => void
    onReset?: (e: any) => void
    onSubmit?: (e: any) => void
    onSelect?: (e: any) => void
    onCopy?: (e: any) => void
    onCut?: (e: any) => void
    onPaste?: (e: any) => void
    onCompositionStart?: (e: any) => void
    onCompositionUpdate?: (e: any) => void
    onCompositionEnd?: (e: any) => void
    onDrag?: (e: any) => void
    onDragStart?: (e: any) => void
    onDragEnd?: (e: any) => void
    onDragEnter?: (e: any) => void
    onDragLeave?: (e: any) => void
    onDragOver?: (e: any) => void
    onDrop?: (e: any) => void
    onScroll?: (e: any) => void
    onWheel?: (e: any) => void
    onAnimationStart?: (e: any) => void
    onAnimationEnd?: (e: any) => void
    onAnimationIteration?: (e: any) => void
    onTransitionEnd?: (e: any) => void
    onLoad?: (e: any) => void
    onError?: (e: any) => void
    onAbort?: (e: any) => void
    onToggle?: (e: any) => void
    onBeforeToggle?: (e: any) => void
    onCanPlay?: (e: any) => void
    onCanPlayThrough?: (e: any) => void
    onDurationChange?: (e: any) => void
    onEmptied?: (e: any) => void
    onEnded?: (e: any) => void
    onLoadedData?: (e: any) => void
    onLoadedMetadata?: (e: any) => void
    onLoadStart?: (e: any) => void
    onPause?: (e: any) => void
    onPlay?: (e: any) => void
    onPlaying?: (e: any) => void
    onProgress?: (e: any) => void
    onRateChange?: (e: any) => void
    onSeeked?: (e: any) => void
    onSeeking?: (e: any) => void
    onStalled?: (e: any) => void
    onSuspend?: (e: any) => void
    onTimeUpdate?: (e: any) => void
    onVolumeChange?: (e: any) => void
    onWaiting?: (e: any) => void
    key?: string | number | null

    React/Preact reconciliation key when rendered inside a list.

    id?: string

    HTML id attribute.

    class?: string

    HTML class attribute (standard DOM).

    className?: string

    React/Preact-style class name. Alias for class.

    style?: CSSProperties

    Inline styles applied to the element.

    children?: ReactNode
    slot?: string

    Assigns the element to a named <slot> (e.g. slot="title").

    tabIndex?: number

    Tab order. Set to 0 to make the element keyboard-focusable.

    state?: string

    Controlled selected value (the active tab's value). Present → controlled: the element reflects changes to this attribute and a pick only dispatches statechange. Absent → uncontrolled (seed with default-state).

    "default-state"?: string

    Uncontrolled initial selected value — read once on connect.

    priority?: "primary" | "secondary" | "tertiary"

    Visual priority. primary (default) is the raised pill on a recessed track; secondary keeps that sizing but drops the track (selected = subtle active background fill, no border); tertiary is a bottom-underline under the selected tab only (no track, no rest line). tone tints secondary + tertiary; primary stays neutral.

    tone?:
        | "neutral"
        | "brand"
        | "info"
        | "success"
        | "warning"
        | "critical"
        | string & {}

    Tone applied to the selected indicator/label, or any literal CSS color for a one-off custom tone (derived in oklch). 'neutral' is the default.

    size?: "small" | "medium" | "large"

    Size variant. small=24px, medium (default)=28px, large=32px tall — matching Button's scale (the label leading runs a touch tighter, offset by 1px more block padding per side).

    orientation?: "horizontal" | "vertical"

    Layout + arrow-key axis. 'horizontal' (default) ellipsizes labels when tabs overflow (scrolling is opt-in via CSS); 'vertical' stacks them.

    fill?: boolean | ""

    Make horizontal tabs share the available inline space equally. Presence-based ('' on, omit off).

    noslide?: boolean | ""

    Disable the sliding indicator. By default the selected-tab indicator is a single rectangle that animates between tabs via CSS anchor positioning; with noslide the highlight is painted on each tab and snaps with no movement (also the automatic fallback where anchor positioning isn't supported). Presence-based ('' on, omit off).

    disabled?: boolean | ""

    Disable the whole strip. Presence-based ('' on, omit off).

    round?: boolean | number | string

    Fully-round tabs + sliding indicator (via --tab-radius: 999px) and the primary track well. A length value (round="10px") applies to the top-level track well only (pills + indicator stay full). Presence-based for the boolean form.

    onstatechange?: (
        e: CustomEvent<{ next: string | null; prev: string | null }>,
    ) => void

    Fires whenever the active tab changes. detail carries { next, prev } (values; null = none). Cancelable: a synchronous preventDefault() vetoes the pick in uncontrolled mode. All-lowercase to bind across both renderers (like <a-radio-group>).

    onchange?: (e: Event) => void

    Native change, fired after a selection applies (post-apply counterpart to onstatechange). Lowercase so both renderers bind the native event.

    onfocusin?: (e: FocusEvent) => void

    Strip focus enter / leave — wired from the bubbling focusin / focusout (focus lands on a tab, not the tablist). The Tabs wrapper maps its onFocus/onBlur.

    onfocusout?: (e: FocusEvent) => void
    role?: "tablist"

    ARIA — set by the Tabs wrapper (the element never touches these).

    "aria-orientation"?: "horizontal" | "vertical"
    "aria-disabled"?: "true" | "false"
    "aria-label"?: string

    Settings
    Member Visibility

    On This Page
    Properties
    onClickonDoubleClickonAuxClickonContextMenuonMouseDownonMouseUponMouseEnteronMouseLeaveonMouseMoveonMouseOveronMouseOutonPointerDownonPointerUponPointerMoveonPointerEnteronPointerLeaveonPointerOveronPointerOutonPointerCancelonGotPointerCaptureonLostPointerCaptureonTouchStartonTouchEndonTouchMoveonTouchCancelonKeyDownonKeyUponFocusonBluronChangeonInputonBeforeInputonInvalidonResetonSubmitonSelectonCopyonCutonPasteonCompositionStartonCompositionUpdateonCompositionEndonDragonDragStartonDragEndonDragEnteronDragLeaveonDragOveronDroponScrollonWheelonAnimationStartonAnimationEndonAnimationIterationonTransitionEndonLoadonErroronAbortonToggleonBeforeToggleonCanPlayonCanPlayThroughonDurationChangeonEmptiedonEndedonLoadedDataonLoadedMetadataonLoadStartonPauseonPlayonPlayingonProgressonRateChangeonSeekedonSeekingonStalledonSuspendonTimeUpdateonVolumeChangeonWaitingkeyidclassclassNamestylechildrenslottabIndexstatedefault-stateprioritytonesizeorientationfillnoslidedisabledroundonstatechangeonchangeonfocusinonfocusoutrolearia-orientationaria-disabledaria-label