# Sign-in page · MIAN

A split sign-in or sign-up page: the form on one side, the brand and a quote or image on the other.

- Id: `auth` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/auth
- Use for: sign in page, login, sign up page, register, create account.
- On a page: page · prominence high · density low.
- Avoid: Asking for more than you need; blocking paste in password fields.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-auth`: The page. Stacks to the form only on narrow screens.
- `mn-auth-main · mn-auth-form`: The form column and the form (max 24rem).
- `mn-auth-aside`: The brand panel, shown from 60rem.
- `mn-or`: An “or” divider between single sign-on and email.

## Accessibility

- Use autocomplete="email" and autocomplete="current-password" (or "new-password") so password managers work.
- Show errors next to the field with aria-describedby and aria-invalid.
- Never disable paste in password fields.

## Examples

### Sign in

```html
<div class="mn-auth" style="min-height:30rem;border:1px solid var(--mn-border);border-radius:var(--mn-radius-box);overflow:hidden">
  <div class="mn-auth-main"><form class="mn-auth-form" action="#">
    <a class="mn-header-brand" href="#"><svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><rect x="3" y="3" width="18" height="18" rx="5"/><path d="M8 7v10h8" stroke="var(--mn-bg)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>Ledger</a>
    <div class="mn-stack" style="--mn-gap:.35rem"><h1 class="mn-h3" style="margin:0">Sign in</h1><p class="mn-muted" style="margin:0">Welcome back. Your close is 72% done.</p></div>
    <button class="mn-btn mn-btn-outline mn-btn-block" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg> Continue with SSO</button>
    <p class="mn-or">or</p>
    <div class="mn-field"><label class="mn-label" for="au-e">Work email</label><input class="mn-input" id="au-e" type="email" autocomplete="email" required></div>
    <div class="mn-field"><label class="mn-label" for="au-p">Password</label><input class="mn-input" id="au-p" type="password" autocomplete="current-password" required></div>
    <button class="mn-btn mn-btn-block">Sign in</button>
  </form></div>
  <aside class="mn-auth-aside" aria-label="About Ledger"><span class="mn-badge mn-badge-outline mn-neutral">Ledger for finance teams</span>
    <figure class="mn-quote"><blockquote><p>“The close is a Tuesday meeting now.”</p></blockquote><figcaption><span class="mn-avatar">MR</span><span><strong>Maren Richter</strong><small>Halden &amp; Co</small></span></figcaption></figure></aside>
</div>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/auth/source