@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
67 lines (66 loc) • 2.12 kB
TypeScript
import React from "react";
import { Stepper, StepperStepProps } from "../../stepper";
import { ComponentTranslation } from "../../util/i18n/i18n.types";
export interface FormProgressProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* Total number of steps.
*/
totalSteps: number;
/**
* Current active step.
*
* Index starts at 1, not 0.
*/
activeStep: number;
/**
* Shows Stepper if `true`, hides if `false`.
* Using this prop removes automatic control of open-state.
*/
open?: boolean;
/**
* Callback for current open-state
*/
onOpenChange?: (open: boolean) => void;
/**
* Should contain <FormProgress.Step> elements.
*/
children: React.ReactNode;
/**
* Callback for next `activeStep`.
*
* Index starts at 1, not 0.
*/
onStepChange?: (step: number) => void;
/**
* Makes Stepper non-interactive if false.
* @default true
*/
interactiveSteps?: boolean;
/**
* i18n API for customizing texts and labels.
*/
translations?: ComponentTranslation<"FormProgress">;
}
export type FormProgressStepProps = StepperStepProps;
interface FormProgressComponent extends React.ForwardRefExoticComponent<FormProgressProps & React.RefAttributes<HTMLDivElement>> {
/**
* To be used inside `<FormProgress>`.
*/
Step: typeof Stepper.Step;
}
/**
* Component for visualizing progression in a form with multiple steps.
*
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/formprogress)
* @see 🏷️ {@link FormProgressProps}
*
* @example
* <FormProgress activeStep={2} totalSteps={3}>
* <FormProgress.Step completed href="#">Children</FormProgress.Step>
* <FormProgress.Step href="#">Personal information</FormProgress.Step>
* <FormProgress.Step interactive={false}>Summary</FormProgress.Step>
* </FormProgress>
*/
export declare const FormProgress: FormProgressComponent;
export declare const FormProgressStep: import("../..").OverridableComponent<StepperStepProps, HTMLAnchorElement>;
export default FormProgress;