Stepper
A stepper is a navigation component that guides users through sequential steps in a process, displaying progress and providing clear direction across tasks.
Last updated
A stepper is a navigation component that guides users through sequential steps in a process, displaying progress and providing clear direction across tasks.
Last updated
Stepper components are essential in multi-step processes where clear navigation and progress visualization are crucial. They are ideal for guiding users through forms, checkout processes, and complex workflows, providing a visual representation of which steps have been completed, which are active, and which are yet to be done.
A stepper component typically displays a sequence of steps, each represented by numbers, icons, or labels. The current step is distinctly highlighted, while completed steps and upcoming steps have different visual markers to clearly delineate progress. Steppers can be oriented either horizontally or vertically and may include additional text labels to offer more context for each step, ensuring users always know their location and what's required next in the process.
Complete: Indicates a completed step in the process, typically shown with a checkmark or a specific color to signify completion.
Current: Highlights the step currently in progress or being viewed, providing a visual indication of the active step.
Dashed Lines: Connects steps to indicate progression. Dashed styling suggests steps that are yet to be completed.
Default: Represents steps that are pending, often displayed with a neutral or inactive style to indicate future actions.
Clearly label each step to ensure users understand what each part of the process entails.
Use ambiguous or unclear labels that might confuse users about what is expected of them.
Highlight the current step distinctly to help users know exactly where they are in the process.
Make it difficult to distinguish between completed, current, and upcoming steps.
Use visual markers like icons or numbers to indicate progress and guide users through the steps.
Clutter the stepper with excessive details that might overwhelm users.
Provide directional controls if the process requires users to navigate back and forth between steps.
Allow navigation to steps that depend on completion of previous steps without proper validation.
type
Defines the style of the tab. It can either be text (just the text of the tab) or text-icon (a combination of text and an icon next to the text). Defaults to 'text'.
string
hover_style
Specifies the hover style for the tabs. Options include different background or border styles that change when a tab is hovered over. Defaults to 'dda-tab-default'.
'dda-tab-default' | 'dda-tab-filed' | 'dda-tab-underline' | 'dda-tab-underline-filled'
border_bottom
Determines whether a border is shown at the bottom of the tab. Defaults to false, meaning no border is added.
boolean
custom_class
Allows the user to apply custom CSS classes to the tabs container for additional styling. Defaults to an empty string (no custom class).
string
component_mode
Optionally defines a mode for the component ('light' or 'dark'), which could be used for conditional styling or behavior. Defaults to 'light'.
string
button_id
An optional ID that can be applied to the button elements of the tabs. Useful for targeting the tabs with specific JavaScript or CSS.
string
aria_label
Defines an accessible label for the tab buttons, improving accessibility by describing the purpose of the buttons for screen readers.
string