Step Form

import { Field, PasswordInput, StepForm, StepFormStep, Input } from '@otfdashkit/ui'

export function Example() {
  return (
    <div className="max-w-md">
      <StepForm steps={['Account', 'Profile', 'Review']} onSubmit={() => alert('Submitted!')}>
        <StepFormStep title="Create your account" description="Enter your login credentials.">
          <Field label="Email" required><Input type="email" placeholder="you@example.com" /></Field>
          <Field label="Password" required><PasswordInput placeholder="••••••••" /></Field>
        </StepFormStep>
        <StepFormStep title="Set up your profile" description="Tell us about yourself.">
          <Field label="Display name" required><Input placeholder="Jane Doe" /></Field>
          <Field label="Bio"><Input placeholder="Short bio…" /></Field>
        </StepFormStep>
        <StepFormStep title="Review & submit" description="Check your details before submitting.">
          <p className="text-sm text-[hsl(var(--muted-foreground))]">Please confirm everything looks correct.</p>
        </StepFormStep>
      </StepForm>
    </div>
  )
}