@antadesign/anta
    Preparing search index...

    Interface TabsPropsUnreviewed

    Public props for <Tabs>.

    interface TabsProps {
        children?: ReactNode;
        options?: TabOption[];
        value?: string;
        defaultValue?: string;
        onStateChange?: (event: StateChangeEvent, detail: StateDetail) => void;
        onChange?: (event: Event) => void;
        onValueChange?: (event: Event, attrs: TabsChangeAttrs) => void;
        onFocus?: (event: FocusEvent) => void;
        onBlur?: (event: FocusEvent) => void;
        label?: string;
        priority?: "primary" | "secondary" | "tertiary";
        tone?:
            | "neutral"
            | "brand"
            | "info"
            | "success"
            | "warning"
            | "critical"
            | string & {};
        size?: "small"
        | "medium"
        | "large";
        orientation?: "horizontal" | "vertical";
        fill?: boolean;
        noslide?: boolean;
        round?: boolean | number | string;
        disabled?: boolean;
        className?: string;
        style?: CSSProperties;
        id?: string;
        title?: string;
        slot?: string;
        tabIndex?: number;
        key?: string | number | null;
        [key: `data-${string}`]: unknown;
        [key: `aria-${string}`]: unknown;
    }

    Hierarchy

    Indexable

    • [key: `data-${string}`]: unknown
    • [key: `aria-${string}`]: unknown
    Index
    children? options? value? defaultValue? onStateChange? onChange? onValueChange? onFocus? onBlur? label? priority? tone? size? orientation? fill? noslide? round? disabled? className? style? id? title? slot? tabIndex? key?
    children?: ReactNode

    Optional <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).

    options?: TabOption[]

    The 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.

    value?: string

    Controlled 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.

    defaultValue?: string

    Initial active value for the uncontrolled case. After first render Tabs owns selection itself.

    onStateChange?: (event: StateChangeEvent, detail: StateDetail) => void

    Fired 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.

    onChange?: (event: Event) => void

    Fired after the active tab changes — a native change event.

    onValueChange?: (event: Event, attrs: TabsChangeAttrs) => void

    Like onChange, but with a { value } snapshot as the 2nd argument.

    onFocus?: (event: FocusEvent) => void

    Focus entered the strip (any tab) — wired to focusin (focus lands on a tab, not the tablist).

    onBlur?: (event: FocusEvent) => void

    Focus left the strip entirely — wired to focusout.

    label?: string

    Accessible name for the tablist (aria-label).

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

    Visual 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.

    'primary'
    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). Named tones track light/dark.

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

    Size — 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).

    'medium'
    orientation?: "horizontal" | "vertical"

    Layout + arrow-key axis. Horizontal ellipsizes labels when tabs overflow (scroll is opt-in via CSS); vertical stacks them.

    'horizontal'
    fill?: boolean

    Makes horizontal tabs share the available inline space equally.

    false
    noslide?: boolean

    Disable 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.)

    round?: boolean | number | string

    Fully-round the tabs and the sliding indicator (and the primary track well). Applies strip-wide; a single tab's round rounds just that tab. A number (px) or CSS length string sets a custom radius on the top-level track well only — the tab pills + indicator stay fully round.

    disabled?: boolean

    Disable the whole strip.

    className?: string

    CSS class on the component's root element (merged with the component's own classes). Use it directly for layout and positioning — grid/flex placement, margins, alignment — rather than wrapping the component in a <div>/<span>.

    style?: CSSProperties

    Inline styles on the component's root element. Set layout/positioning here (or via className) directly on the component instead of adding a wrapper.

    id?: string

    HTML id attribute.

    title?: string

    HTML title attribute — native browser tooltip on hover.

    slot?: string

    Assigns the element to a named <slot> of a parent web component (e.g. slot="header" inside a <Card>, slot="footer" inside a <Dialog>).

    tabIndex?: number

    Tab order. Set to -1 to skip the element when tabbing.

    key?: string | number | null

    React/Preact reconciliation key when rendered inside a list. Consumed by the JSX runtime (not forwarded as a DOM attribute).

    Settings
    Member Visibility

    On This Page
    Properties