@navikt/ds-react/cjs/stepper/Stepper.d.ts

React components from the Norwegian Labour and Welfare Administration.

import React from "react";
import Step from "./Step";
export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
    /**
     * `<Stepper.Step />` elements.
     */
    children: React.ReactNode;
    /**
     * The direction the component grows.
     * @default "vertical"
     */
    orientation?: "horizontal" | "vertical";
    /**
     * Current active step.
     *
     * Stepper index starts at 1, not 0.
     */
    activeStep: number;
    /**
     * Callback for next `activeStep`.
     *
     * Stepper index starts at 1, not 0.
     */
    onStepChange?: (step: number) => void;
    /**
     * Makes stepper non-interactive if false.
     * @deprecated Use `interactive` prop on `<Stepper.Step />` instead for individual steps. For completely static steppers, use `Process` component instead.
     * @default true
     */
    interactive?: boolean;
}
interface StepperComponent extends React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLOListElement>> {
    /**
     * @see 🏷️ {@link StepperStepProps}
     * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
     */
    Step: typeof Step;
}
/**
 * A component that displays a stepper with clickable steps.
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/stepper)
 * @see 🏷️ {@link StepperProps}
 *
 * @example
 * ```jsx
 * <>
 *   <Heading size="medium" spacing level="2" id="stepper-heading">
 *     Søknadssteg
 *   </Heading>
 *   <Stepper
 *     aria-labelledby="stepper-heading"
 *     activeStep={activeStep}
 *     onStepChange={setActiveStep}
 *   >
 *     <Stepper.Step href="#">Start søknad</Stepper.Step>
 *     <Stepper.Step href="#">Saksopplysninger</Stepper.Step>
 *     <Stepper.Step href="#">Vedlegg</Stepper.Step>
 *   </Stepper>
 * </>
 * ```
 */
export declare const Stepper: StepperComponent;
export default Stepper;