Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Additional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Releases Design Tokens Components Overview Base Informations Overview Base Components Overview App Icons Power-Apps Digital banner ads SAP Design Guidelines AI Design: Basics Step Info

What does the component do?

It is part of the stepper component.

When should the component be used?

  • Only within the stepper component.
Stepper
Demo Default
Try it out on Storybook Show HTML
Copy HTML to clipboard. Implementation

Use the sbb-step with the sbb-stepper to display a step content.

<sbb-step>Step content</sbb-step>

Slots

It has an implicit slot named step.

Events

Whenever a step switch is triggered, a validate event is emitted and can be canceled to prevent the step change.

Accessibility

Whenever textual content is provided, please also set the attribute tabindex=‘0’ on the text tag, so that it can be reached and announced by screen-readers. Also remember to use the classes .sbb-focus-outline and .sbb-focus-outline-dark to correctly style the outline.

<sbb-step>
    <p tabindex="0" class="sbb-focus-outline">Step content</p>
    <sbb-button>Button<sbb-button>
</sbb-step>

The aria attribute aria-labelledby is set automatically.

Properties

Name Attribute Privacy Type Default Description
label - public SbbStepLabelElement | null null The label of the step.
stepper - public SbbStepperElement | null

Events

Name Type Description Inherited From
validate CustomEvent<SbbStepValidateEventDetails> The validate event is dispatched when a step change is triggered. Can be canceled to abort the step change.

Slots

Name Description
Use the unnamed slot to provide content.
Contact

Do you have any questions? Maybe our FAQ or our help will be helpful, otherwise you can post your question on the corresponding board on Github.

Imprint Contact Data privacy Cookie settings