Multi-Step Form

<form class="flex flex-col gap-6 rounded-2xl border border-border bg-card p-8">
<ol class="flex items-center gap-2" aria-label="Progresso">
  <li class="flex flex-1 items-center gap-2">
<span class="flex h-8 w-8 items-center justify-center rounded-full bg-brand text-sm font-semibold text-brand-foreground">1</span>
    <span class="text-sm font-medium text-foreground">Conta</span>
  </li>
  <span class="h-px flex-1 bg-border"></span>
  <li class="flex flex-1 items-center gap-2">
    <span class="flex h-8 w-8 items-center justify-center rounded-full border-2 border-brand text-sm font-semibold text-brand">2</span>
    <span class="text-sm font-medium text-foreground">Workspace</span>
  </li>
  <span class="h-px flex-1 bg-border"></span>
  <li class="flex flex-1 items-center gap-2">
    <span class="flex h-8 w-8 items-center justify-center rounded-full border border-border text-sm font-semibold text-muted-foreground">3</span>
    <span class="text-sm font-medium text-muted-foreground">Convite</span>
  </li>
</ol>
<header class="flex flex-col gap-1">
  <h2 class="text-xl font-semibold text-foreground">Crie seu workspace</h2>
  <p class="text-sm text-muted-foreground">Onde sua equipe vai colaborar.</p>
</header>
<label class="itps-field">
  <span class="itps-field__label">Nome do workspace</span>
  <input type="text" class="itps-input" placeholder="Acme Inc." />
</label>
<label class="itps-field">
  <span class="itps-field__label">URL</span>
  <input type="text" class="itps-input" placeholder="acme" />
  <span class="itps-field__hint">sinapse.app/<strong>acme</strong></span>
</label>
<footer class="flex items-center justify-between border-t border-border pt-4">
  <button type="button" class="itps-btn itps-btn--ghost">Voltar</button>
  <button type="button" class="itps-btn itps-btn--primary">Próximo</button>
</footer>
</form>

<form class="flex flex-col gap-6 rounded-2xl border border-border bg-card p-8">…</form>