Preview

Note: Steps are set via the steps JavaScript property. See usage below.

Usage

<cs-steps></cs-steps>

<script>
  const steps = document.querySelector('cs-steps');
  steps.steps = [
    { title: 'Choose instance type', description: 'Select the instance type for your workload' },
    { title: 'Configure settings', description: 'Set up networking and storage' },
    { title: 'Review and launch', description: 'Verify configuration and launch' },
  ];
  steps.activeStepIndex = 1;
</script>

Properties

aria-describedbystring

Sets the aria-describedby property on the progress steps container.

aria-labelstring default: null

Provides an aria-label to the progress steps container. Don't use ariaLabel and ariaLabelledby at the same time.

aria-labelledbystring

Sets the aria-labelledby property on the progress steps container. If there's a visible label element that you can reference, use this instead of ariaLabel. Don't use ariaLabel and ariaLabelledby at the same time.

orientationStepsProps.Orientation default: 'vertical'

The visual orientation of the steps (vertical or horizontal). By default the orientation is vertical.

render-step(step: StepsProps.Step) => { header?: SlotContent; details?: SlotContent; icon?: SlotContent; }

Render a step. This overrides the default icon, header, and details provided by the component. The function is called for each step and should return an object with the following keys:

• header (unknown) - Summary corresponding to the step.
• details (unknown) - (Optional) Additional information corresponding to the step.
• icon (unknown) - (Optional) Replaces the standard step icon from the status indicator.

stepsReadonlyArray<StepsProps.Step>required

An array of individual steps

Each step definition has the following properties:

• status (string) - Status of the step corresponding to a status indicator.
• statusIconAriaLabel - (string) - (Optional) Alternative text for the status icon.
• header (unknown) - Summary corresponding to the step.
• details (unknown) - (Optional) Additional information corresponding to the step.