# Sidebar progress

> A side column holds the logo and the steps with icons; the password step fills the rest.

URL: https://apogee.avaui.dev/docs/sign-up-pages/sidebar-progress
Last updated: 2026-10-15

A side column holds the logo and the steps with icons; the password step fills the rest.

Last updated October 15, 2026

Live example: https://apogee.avaui.dev/examples/sign-up/sidebar-progress

```astro
---
/**
 * Sidebar progress: A side column holds the logo and the steps with icons; the password step fills the rest.
 *
 * @page sign-up
 */
import { Orbit, KeyRound, User, UserPlus, Share2, Mail } from '@lucide/astro'
import AuthShell from '@/components/apogee/sections/AuthShell/AuthShell.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Input from '@/components/apogee/Input/Input.astro'
import PasswordChecklist from '@/components/apogee/PasswordChecklist/PasswordChecklist.astro'
import Button from '@/components/apogee/Button/Button.astro'
import Steps from '@/components/apogee/Steps/Steps.astro'
import ProgressIndicator from '@/components/apogee/ProgressIndicator/ProgressIndicator.astro'

const steps = [
  { title: 'Your details', description: 'Please provide your name and email', icon: User },
  { title: 'Choose a password', description: 'Choose a secure password', icon: KeyRound },
  { title: 'Invite your team', description: 'Start collaborating with your team', icon: UserPlus },
  { title: 'Add your socials', description: 'Share posts to your social accounts', icon: Share2 },
]
---

<AuthShell layout="sidebar" heading="Choose a password" description="Use something you have not used anywhere else." pattern="grid">
  <FeaturedIcon slot="brand" theme="outline" color="neutral" size="large"><KeyRound /></FeaturedIcon>

  <form method="post" class="flex flex-col gap-6">
    <div class="flex flex-col gap-3">
      <Input id="new-password" label="Password" type="password" name="password" placeholder="Choose a password" autocomplete="new-password" minlength="8" required />
      <PasswordChecklist for="new-password" rules={[{ label: 'At least 8 characters', minLength: 8 }, { label: 'One special character', pattern: '[^A-Za-z0-9]' }]} />
      <Input id="confirm-password" label="Confirm password" type="password" name="password_confirm" placeholder="Confirm password" autocomplete="new-password" required class="mt-2" />
      <PasswordChecklist for="confirm-password" rules={[{ label: 'Passwords match', match: 'new-password' }]} />
    </div>
    <Button type="submit" size="large" fullWidth>Continue</Button>
  </form>

  <div slot="below" class="flex justify-center">
    <ProgressIndicator total={4} current={2} variant="dots" aria-label="Sign up progress" />
  </div>

  <div slot="panel" class="flex h-full flex-col justify-between gap-16 p-8">
    <div class="flex flex-col gap-16">
      <a href="#" class="flex items-center gap-2 font-semibold">
        <FeaturedIcon theme="solid" color="primary" size="small"><Orbit /></FeaturedIcon>
        Example
      </a>
      <Steps items={steps} current={2} marker="icon" orientation="vertical" aria-label="Sign up progress" />
    </div>
    <div class="flex flex-wrap items-center justify-between gap-4 text-sm text-neutral-faded">
      <p>© Example 2026</p>
      <p class="flex items-center gap-2"><Mail class="size-4" aria-hidden="true" /> help@example.com</p>
    </div>
  </div>
</AuthShell>
```

## Add

```sh
npx @ava-ui/apogee add sign-up/sidebar-progress
```

This copies the page to `src/components/apogee/pages/sign-up/` with everything it uses: AuthShell, Button, FeaturedIcon, Input, PasswordChecklist, ProgressIndicator, Steps. Render it from one of your routes, or use **Copy code** above.

## Accessibility

-   The page heading is the `h1`; the fields carry visible labels and `autocomplete` hints (`new-password` for new passwords, so password managers offer to generate one).
-   Below `lg` the side column hides; the dots under the form still say “step 2 of 4” to screen readers.

## Related

[

Auth shellThe frame of a log in, sign up or recovery page; brand mark, heading and your form, centred, in a card, beside a panel, or beside a step sidebar.

](https://apogee.avaui.dev/docs/sections/auth-shell)[

PasswordChecklistThe rules a new password must meet, ticked off as the user types.

](https://apogee.avaui.dev/docs/password-checklist)[

ProgressIndicatorStep N of M as a row of segments, for onboarding flows, wizards and carousels. Zero JS.

](https://apogee.avaui.dev/docs/progress-indicator)[

StepsA vertical progress list for onboarding, checkout, and wizard flows.

](https://apogee.avaui.dev/docs/steps)