Use for guiding users through a multi-step workflow with horizontal progress.
currentStepcurrent-stepThe currently selected step.
lastEnabledSteplast-enabled-stepThe last step the user may navigate to.
Will be managed automatically if not provided.
The q2-stepper element exposes events that can be used to send and receive data from the component based on user interaction.
Emitted when the selected step changes.
anyIf an event handler is bound to the element using:
ontctChange property - The default handler will not fire, and the value must be updated in the custom handler.addEventListener("tctChange") method - The default handler will fire alongside the custom handler.The q2-stepper element exposes methods that can be used to perform various actions on the component.
Emulates clicking a step in the stepper and emitting the change event.
You may provide either the step number or the stepper pane id.
If the value is invalid or the step is locked, the method will do nothing.
selectStep(value: number | string) => Promise<void>The q2-stepper element is populated via q2-stepper-pane elements, each of which represents a single step in a multi-step process. At runtime, the q2-stepper element will automatically determine how many steps are available by counting the number of q2-stepper-pane elements in its body.
If the current-step attribute is set, the q2-stepper element will automatically display that step. If it is not provided, it will default to the first step.
A user may navigate to previous steps by clicking the bullet associated to it, however they will not be to navigate to future, uncompleted steps.
To unlock future steps, you may manually update the current-step attribute which will take the user to the specified step and update the last-enabled-step if necessary. You may also just update the last-enabled-step attribute, which will unlock the step without taking the user to it.
The step navigation label and description are configured on each q2-stepper-pane. Use the label and description attributes for plain text, or use the label and description slots when you need basic HTML in the step navigation.
Select the account to use for this workflow.
Add the amount, date, and memo.
Confirm the details before submitting.
<q2-stepper current-step="1" last-enabled-step="3">
<q2-stepper-pane id="account" label="Account" description="Choose an account" is-active>
<div slot="label">Choose <strong>Account</strong></div>
<div slot="description">
<div class="ellipsize">Rewards Checking</div>
<div>Available balance</div>
</div>
<h3>Choose Account</h3>
<p>Select the account to use for this workflow.</p>
</q2-stepper-pane>
<q2-stepper-pane id="details" label="Details" description="Add transfer details">
<h3>Details</h3>
<p>Add the amount, date, and memo.</p>
</q2-stepper-pane>
<q2-stepper-pane id="review" label="Review" description="Confirm and submit">
<h3>Review</h3>
<p>Confirm the details before submitting.</p>
</q2-stepper-pane>
</q2-stepper>
The q2-stepper element is populated via q2-stepper-pane elements, each of which represents a single step in a multi-step process. At runtime, the q2-stepper element will build a navigation on the left side of the stepper which can be interacted with by the user.
Each instance of q2-stepper-pane can be in one of several states, that you are responsible for managing:
status provided - The step is enabled.status="complete" - The step is enabled but marked as completed.status="error" - The step is enabled but marked as having errors.status="locked" - The step is disabled.Each of the statuses appears like this:
This stepper has a total of 6 steps. This is step 1.
This stepper has a total of 6 steps. This is step 2.
This stepper has a total of 6 steps. This is step 3.
This stepper has a total of 6 steps. This is step 4.
This stepper has a total of 6 steps. This is step 5.
This stepper has a total of 6 steps. This is step 6.
<q2-stepper current-step="3" last-enabled-step="5">
<q2-stepper-pane id="step-1013" label="Step 1" description="This is number 1 of 6 steps.">
<h3>Step 1</h3>
<p>This stepper has a total of 6 steps. This is step 1.</p>
</q2-stepper-pane>
<q2-stepper-pane id="step-1002" label="Step 2" description="This is number 2 of 6 steps." status="error">
<h3>Step 2</h3>
<p>This stepper has a total of 6 steps. This is step 2.</p>
</q2-stepper-pane>
<q2-stepper-pane id="step-1009" label="Step 3" description="This is number 3 of 6 steps." status="complete" is-active>
<h3>Step 3</h3>
<p>This stepper has a total of 6 steps. This is step 3.</p>
</q2-stepper-pane>
<q2-stepper-pane id="step-1006" label="Step 4" description="This is number 4 of 6 steps." status="locked">
<h3>Step 4</h3>
<p>This stepper has a total of 6 steps. This is step 4.</p>
</q2-stepper-pane>
<q2-stepper-pane id="step-1005" label="Step 5" description="This is number 5 of 6 steps.">
<h3>Step 5</h3>
<p>This stepper has a total of 6 steps. This is step 5.</p>
</q2-stepper-pane>
<q2-stepper-pane id="step-1006" label="Step 6" description="This is number 6 of 6 steps.">
<h3>Step 6</h3>
<p>This stepper has a total of 6 steps. This is step 6.</p>
</q2-stepper-pane>
</q2-stepper>
The following CSS variables are available to override the default theme styles of the q2-stepper component.
Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!
This component uses other components in the Tecton library, including:
q2-iconq2-btnThe changelog provides a detailed history of new features, improvements, and bug fixes going back to Tecton 1.30.0. If the button is disabled, it indicates there have been no detectable changes since then.