kobaltedev / kobalte

A UI toolkit for building accessible web apps and design systems with SolidJS.
https://kobalte.dev
MIT License
1.29k stars 73 forks source link

New component - Stepper #520

Open Waishnav opened 1 week ago

Waishnav commented 1 week ago

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:

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

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.

Waishnav commented 4 days ago

Hey @jer3m01 and team! 😊

I was looking through the library docs but couldn’t find a Stepper component. so I built it's first version, would love to hear your thoughts and review on the PR #523

Again thanks for your guidance and for all the hard work that goes into this library! for my first solidjs project, this library really help me move fast with building ui components. :)