# Enter code

> Step 2. A four-digit code, a verify button and a way to resend the email.

URL: https://apogee.avaui.dev/docs/verification-pages/enter-code
Last updated: 2026-10-15

Step 2. A four-digit code, a verify button and a way to resend the email.

Last updated October 15, 2026

Live example: https://apogee.avaui.dev/examples/verification/enter-code

```astro
---
/**
 * Enter code: Step 2. A four-digit code, a verify button and a way to resend the email.
 *
 * @page verification
 */
import { Mail, ArrowLeft } from '@lucide/astro'
import AuthShell from '@/components/apogee/sections/AuthShell/AuthShell.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import PinInput from '@/components/apogee/PinInput/PinInput.astro'
import Button from '@/components/apogee/Button/Button.astro'
import Link from '@/components/apogee/Link/Link.astro'
---

<AuthShell heading="Check your email" description="We sent a verification code to mara@example.com." pattern="grid">
  <FeaturedIcon slot="brand" theme="outline" color="neutral" size="large"><Mail /></FeaturedIcon>

  <form method="post" class="flex flex-col items-center gap-8">
    <PinInput name="code" length={4} aria-label="Verification code" />
    <Button type="submit" size="large" fullWidth>Verify email</Button>
  </form>

  <div slot="footer" class="flex flex-col items-center gap-8">
    <p class="text-neutral-faded">Didn't receive the email? <Link href="#" underline="hover" class="font-semibold">Click to resend</Link></p>
    <Button href="#" variant="ghost" color="neutral">
      <ArrowLeft slot="start" class="rtl:-scale-x-100" aria-hidden="true" />
      Back to log in
    </Button>
  </div>
</AuthShell>
```

## Add

```sh
npx @ava-ui/apogee add verification/enter-code
```

This copies the page to `src/components/apogee/pages/verification/` with everything it uses: AuthShell, Button, FeaturedIcon, Link, PinInput. Render it from one of your routes, or use **Copy code** above.

## Accessibility

-   The page heading is the `h1`; the “Back to log in” arrow flips under right-to-left text.
-   The code boxes form one group named “Verification code”; arrows move between boxes and a pasted code fills them all. See [PinInput](https://apogee.avaui.dev/docs/pin-input).
-   “Click to resend” is a link: point it at your resend endpoint.

## 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)[

PinInputA row of single-character boxes for short codes (OTP, 2FA).

](https://apogee.avaui.dev/docs/pin-input)[

Featured iconAn icon in a tinted tile, the glyph that leads an empty state, an alert, a stat or a feature card.

](https://apogee.avaui.dev/docs/featured-icon)