Package

v4.x

Description

Currently, the UStepper component only allows navigation through steps by clicking on the indicator (trigger).
The title text is not clickable, which can be confusing for users who expect to be able to click on the step title to navigate to that step.

This feature request proposes adding click functionality to the StepperTitle component so that users can click on the title text to navigate directly to that step.

Additional context

Use Cases

• Users can click on step titles for more intuitive navigation
• Improves accessibility by providing a larger clickable area
• Matches common UX patterns where step titles are clickable in stepper components
• Reduces the need to precisely click on the small indicator circle

Proposed Solution

Add a click handler to the StepperTitle component that:

• Navigates to the clicked step when the title is clicked
• Respects the disabled state (both item-level and component-level)
• Provides visual feedback with a pointer cursor when the title is clickable
• Maintains existing functionality for the indicator trigger

Implementation Details

• Add a goToStep function that sets the currentStepIndex to the clicked step index
• Add @click event handler to StepperTitle component
• Add conditional cursor: pointer style when the step is not disabled
• Ensure the click handler respects both item.disabled and props.disabled states

Alternatives Considered

• Making the entire wrapper clickable (but this might interfere with other interactive elements)
• Only making the indicator clickable (current behavior, but less intuitive)

Additional Context

As-Is

To-Be