Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New component - Stepper #520

Open
Waishnav opened this issue Nov 5, 2024 · 0 comments
Open

New component - Stepper #520

Waishnav opened this issue Nov 5, 2024 · 0 comments

Comments

@Waishnav
Copy link

Waishnav commented Nov 5, 2024

Is your feature request related to a problem? Please describe.
As of now we don't have stepper component. This component is very useful for application where we have to show multi step forms. We can have composable ui component similar to mantine.dev's stepper or ark.ui's step component

Describe the solution you'd like
A composable stepper component with the following features:

  • Progress tracking through multiple steps
  • Support for both controlled and uncontrolled modes
  • Step indicators with completion states
  • Navigation controls (prev/next)

basic example of usage of this component

function Demo() {
  return (
    <Stepper.Root count={3} defaultActiveStep={0}>
      <Stepper.List>
        <For each={['Account', 'Details', 'Complete']}>
          {(label, index) => (
            <Stepper.Item index={index()}>
              <Stepper.Trigger>
                <Stepper.Indicator>{index() + 1}</Stepper.Indicator>
                <span>{label}</span>
              </Stepper.Trigger>
              <Stepper.Separator />
            </Stepper.Item>
          )}
        </For>
      </Stepper.List>

      <Stepper.Content index={0}>Account details...</Stepper.Content>
      <Stepper.Content index={1}>Personal info...</Stepper.Content>
      <Stepper.Content index={2}>Review details...</Stepper.Content>

      <Stepper.CompletedContent>
        All steps completed!
      </Stepper.CompletedContent>

      <div>
        <Stepper.PrevTrigger>Back</Stepper.PrevTrigger>
        <Stepper.NextTrigger>Next</Stepper.NextTrigger>
      </div>
    </Stepper.Root>
  );
}

Describe alternatives you've considered

  • Using a tab component with custom styling but it lacks proper step tracking and navigation
  • Using a progress indicator with manual state management. but we can't show the step count, we relies on progress visually

Additional context
I'm taking inspiration from these two ui library mantine.dev and arc.ui for its implementation. Would love to hear any feedback and suggestion.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant