@coreui/vue-pro/dist/esm/components/stepper/CStepper.d.ts

UI Components Library for Vue.js

import type { StepperStepData } from './types';
export declare const CStepper: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    /**
     * The default active step index when not using `v-model`.
     */
    activeStepNumber: {
        type: NumberConstructor;
        default: number;
    };
    /**
     * Optional unique ID used for accessibility attributes like `aria-labelledby`.
     */
    id: StringConstructor;
    /**
     * Sets the layout direction of the Vue Stepper component.
     *
     * - `'horizontal'` – Steps are placed side-by-side.
     * - `'vertical'` – Steps are stacked vertically (ideal for mobile).
     *
     * This makes the Vue Form Wizard adaptable to various screen sizes.
     */
    layout: {
        type: () => "horizontal" | "vertical";
        default: string;
    };
    /**
     * Enables linear step progression in the Vue Form Wizard.
     *
     * - `true`: Steps must be completed in order.
     * - `false`: Users can navigate freely between steps.
     *
     * Useful for enforcing validation and structured data entry in Vue multi-step forms.
     */
    linear: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * The current active step index of the Vue Stepper (used for controlled mode with `v-model`).
     *
     * If this prop is not provided, the Vue Form Wizard will use `activeStepNumber` as its initial value.
     */
    modelValue: NumberConstructor;
    /**
     * Defines the list of steps in the Vue Stepper.
     *
     * Each step should include:
     * - `label`: The title displayed in the step.
     * - `indicator` (optional): Custom icon, number, or marker.
     * - `formRef` (optional): A reference to the `<form>` used for validation in Vue Form Wizard scenarios.
     */
    steps: {
        type: () => (StepperStepData | string)[];
        required: true;
    };
    /**
     * Controls the layout of the step indicator and label.
     *
     * - `'horizontal'`: Icon and label are side-by-side.
     * - `'vertical'`: Label is shown below the icon.
     *
     * Applies only when `layout` is set to `'horizontal'`.
     */
    stepButtonLayout: {
        type: () => "horizontal" | "vertical";
        default: string;
    };
    /**
     * Enables validation of forms within each step of the Vue Form Wizard.
     *
     * When set to `true`, the user cannot proceed unless the current step's form passes `checkValidity()`.
     * Each step must expose a native form element via the `formRef` slot binding.
     */
    validation: {
        type: BooleanConstructor;
        default: boolean;
    };
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("reset" | "update:modelValue" | "finish" | "stepChange" | "stepValidationComplete")[], "reset" | "update:modelValue" | "finish" | "stepChange" | "stepValidationComplete", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * The default active step index when not using `v-model`.
     */
    activeStepNumber: {
        type: NumberConstructor;
        default: number;
    };
    /**
     * Optional unique ID used for accessibility attributes like `aria-labelledby`.
     */
    id: StringConstructor;
    /**
     * Sets the layout direction of the Vue Stepper component.
     *
     * - `'horizontal'` – Steps are placed side-by-side.
     * - `'vertical'` – Steps are stacked vertically (ideal for mobile).
     *
     * This makes the Vue Form Wizard adaptable to various screen sizes.
     */
    layout: {
        type: () => "horizontal" | "vertical";
        default: string;
    };
    /**
     * Enables linear step progression in the Vue Form Wizard.
     *
     * - `true`: Steps must be completed in order.
     * - `false`: Users can navigate freely between steps.
     *
     * Useful for enforcing validation and structured data entry in Vue multi-step forms.
     */
    linear: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * The current active step index of the Vue Stepper (used for controlled mode with `v-model`).
     *
     * If this prop is not provided, the Vue Form Wizard will use `activeStepNumber` as its initial value.
     */
    modelValue: NumberConstructor;
    /**
     * Defines the list of steps in the Vue Stepper.
     *
     * Each step should include:
     * - `label`: The title displayed in the step.
     * - `indicator` (optional): Custom icon, number, or marker.
     * - `formRef` (optional): A reference to the `<form>` used for validation in Vue Form Wizard scenarios.
     */
    steps: {
        type: () => (StepperStepData | string)[];
        required: true;
    };
    /**
     * Controls the layout of the step indicator and label.
     *
     * - `'horizontal'`: Icon and label are side-by-side.
     * - `'vertical'`: Label is shown below the icon.
     *
     * Applies only when `layout` is set to `'horizontal'`.
     */
    stepButtonLayout: {
        type: () => "horizontal" | "vertical";
        default: string;
    };
    /**
     * Enables validation of forms within each step of the Vue Form Wizard.
     *
     * When set to `true`, the user cannot proceed unless the current step's form passes `checkValidity()`.
     * Each step must expose a native form element via the `formRef` slot binding.
     */
    validation: {
        type: BooleanConstructor;
        default: boolean;
    };
}>> & Readonly<{
    onReset?: ((...args: any[]) => any) | undefined;
    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
    onFinish?: ((...args: any[]) => any) | undefined;
    onStepChange?: ((...args: any[]) => any) | undefined;
    onStepValidationComplete?: ((...args: any[]) => any) | undefined;
}>, {
    layout: "horizontal" | "vertical";
    linear: boolean;
    activeStepNumber: number;
    stepButtonLayout: "horizontal" | "vertical";
    validation: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;