# Simple

> A centred form with a sign up / log in switch, remember me, and an SSO button.

URL: https://apogee.avaui.dev/docs/log-in-pages/simple
Last updated: 2026-10-15

A centred form with a sign up / log in switch, remember me, and an SSO button.

Last updated October 15, 2026

Live example: https://apogee.avaui.dev/examples/log-in/simple

```astro
---
/**
 * Simple: A centred form with a sign up / log in switch, remember me, and an SSO button.
 *
 * @page log-in
 */
import { Orbit, KeyRound } from '@lucide/astro'
import AuthShell from '@/components/apogee/sections/AuthShell/AuthShell.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import NavLink from '@/components/apogee/NavLink/NavLink.astro'
import Input from '@/components/apogee/Input/Input.astro'
import Checkbox from '@/components/apogee/Checkbox/Checkbox.astro'
import Button from '@/components/apogee/Button/Button.astro'
import Link from '@/components/apogee/Link/Link.astro'
---

<AuthShell heading="Log in to your account" description="Welcome back! Please enter your details." pattern="grid">
  <FeaturedIcon slot="brand" theme="solid" color="primary" size="large"><Orbit /></FeaturedIcon>
  <nav slot="intro" aria-label="Account" class="grid w-full grid-cols-2 gap-0.5 rounded-md bg-neutral-faded p-0.5 text-sm">
    <NavLink href="#" class="justify-center aria-[current=page]:bg-page aria-[current=page]:shadow-outline dark:aria-[current=page]:bg-neutral">Sign up</NavLink>
    <NavLink href="#" active class="justify-center aria-[current=page]:bg-page aria-[current=page]:shadow-outline dark:aria-[current=page]:bg-neutral">Log in</NavLink>
  </nav>

  <form method="post" class="flex flex-col gap-6">
    <div class="flex flex-col gap-5">
      <Input label="Email" type="email" name="email" placeholder="Enter your email" autocomplete="email" required />
      <Input label="Password" type="password" name="password" placeholder="••••••••" autocomplete="current-password" required />
    </div>
    <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
      <Checkbox label="Remember for 30 days" name="remember" />
      <Link href="#" underline="hover" class="text-sm font-semibold">Forgot password</Link>
    </div>
    <div class="flex flex-col gap-4">
      <Button type="submit" size="large" fullWidth>Sign in</Button>
      <Button href="#" variant="outline" color="neutral" size="large" fullWidth>
        <KeyRound slot="start" aria-hidden="true" />
        Sign in with SSO
      </Button>
    </div>
  </form>

  <p slot="footer" class="text-neutral-faded">
    Don't have an account? <Link href="#" underline="hover" class="font-semibold">Sign up</Link>
  </p>
</AuthShell>
```

## Add

```sh
npx @ava-ui/apogee add log-in/simple
```

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

## Accessibility

-   The page heading is the `h1`; the form fields carry visible labels and `autocomplete` hints, so password managers fill them.
-   The “Sign up / Log in” switch is a Tabs list whose Sign up tab is a link, so it navigates instead of showing a panel.
-   The SSO button is a link to your identity provider; swap its `href` for your own.

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

TabsSwitch between panels of related content in the same space.

](https://apogee.avaui.dev/docs/tabs)[

InputA labeled text field with hint/error messaging, wired for accessibility — plus a pure-CSS floating label.

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

CheckboxA native checkbox with a custom look. Toggle a single option, or one item in a multi-select list.

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