@antadesign/anta
    Preparing search index...

    Interface StepsPropsUnreviewed

    Public props for <Steps>. Selection, panels, events, orientation, size, and disabled behavior match <Tabs>.

    interface StepsProps {
        options: StepOption[];
        priority?: StepPriority;
        tone?: StepTone | "";
        renderMarker?: (option: StepOption, state: StepMarkerState) => ReactNode;
        children?: ReactNode;
        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;
        size?: "small" | "medium" | "large";
        orientation?: "horizontal" | "vertical";
        fill?: boolean;
        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

    • Omit<TabsProps, "options" | "priority" | "tone" | "noslide" | "round">
      • StepsProps

    Indexable

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

    Ordered process phases.

    priority?: StepPriority

    Visual emphasis. Primary uses a solid selected marker and a stronger completed connector; secondary is the outlined default; tertiary is compact and borderless.

    'secondary'
    tone?: StepTone | ""

    Tone applied to every step without its own tone. Error steps stay critical and disabled steps stay neutral.

    'neutral'
    renderMarker?: (option: StepOption, state: StepMarkerState) => ReactNode

    Builds a custom marker from a step and its current state. A returned node replaces marker and the built-in state marker; return undefined to use those fallbacks, or null for an empty ring.

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

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

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