Skip to main content

Step
New

Step is a component used inside Stepper. A step consists of a numbered heading and content. For concrete usage examples, please see the Stepper component.

Properties #

Property Attribute Description Type Default
heading (required) heading Set the heading for the step. string undefined
headingLevel (required) heading-level Set the heading level used in the HTML markup. "h1" or "h2" or "h3" or "h4" or "h5" or "h6" undefined
roundedBottom rounded-bottom Enable/disable rounded bottom corners (on mobile). This property is used internally by stepper, and should not be set by the developer. boolean false
roundedTop rounded-top Enable/disable rounded top corners (on mobile). This property is used internally by stepper, and should not be set by the developer. boolean false
state state The state of the step. This property is used internally by stepper, and should not be set by the developer. "complete" or "current" or "incomplete" undefined
stepIndex step-index The index of this step, derived from its position within stepper. This property is used internally by stepper, and should not be set by the developer. number undefined
theme theme Theme of the heading. Can be one of: "default", "turva". "" or "default" or "turva" ""

Events #

Event Description Type
duetStepClick Event emitted when the step heading is clicked. CustomEvent<{ originalEvent: KeyboardEvent or MouseEvent; component: "duet-step"; stepIndex: number; }>

Methods #

setFocus() => Promise<void> #

Programmatically shift focus to the step's heading.

Returns #

Type: Promise<void>

Dependencies #

Depends on #

Graph #

graph TD;
duet-step --> duet-spacer
duet-step --> duet-heading
style duet-step fill:#f9f,stroke:#333,stroke-width:4px

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.



Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes


Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.