Every form on this page is built from the field unit: the labels, required markers, and help text come from that pattern. It's a further example of how to use Brio compositions to build out common patterns. For this page, what differs is how form can use autocomplete values. The values below are the ones browsers and password managers usually match against, so autofill and password saving work when they are present.
Sign in
Email and password, a remember-me choice, and a link for a forgotten password.
Sign in
Don't have an account? Sign up
<div class="card center" style="--center-max: 24rem">
<div class="flow">
<h2>Sign in</h2>
<form class="stack">
<div class="stack is-tight">
<label for="signin-email">Email</label>
<input
id="signin-email"
type="email"
class="input"
required
autocomplete="username"
/>
</div>
<div class="stack is-tight">
<label for="signin-password">Password</label>
<input
id="signin-password"
type="password"
class="input"
required
autocomplete="current-password"
/>
</div>
<div class="cluster is-between">
<label class="cluster is-tight">
<input type="checkbox" name="remember" class="input" />
Remember me
</label>
<a href="#forgot-password" class="text--1">Forgot password?</a>
</div>
<button class="button" type="submit">Sign in</button>
</form>
<p class="text-muted text--1 text-center">
Don't have an account? <a href="#sign-up">Sign up</a>
</p>
</div>
</div>
Sign up
Password requirements are help text, wired with aria-describedby, not
placeholder copy.
Create account
Already have an account? Sign in
<div class="card center" style="--center-max: 24rem">
<div class="flow">
<h2>Create account</h2>
<form class="stack">
<div class="stack is-tight">
<label for="signup-email">Email</label>
<input
id="signup-email"
type="email"
class="input"
required
autocomplete="email"
/>
</div>
<div>
<div class="stack is-tight">
<label for="signup-password">Password</label>
<input
id="signup-password"
type="password"
class="input"
required
minlength="8"
autocomplete="new-password"
aria-describedby="signup-password-help"
/>
<p id="signup-password-help" class="text-muted text--1">
At least 8 characters.
</p>
</div>
</div>
<div class="stack is-tight">
<label for="signup-confirm">Confirm password</label>
<input
id="signup-confirm"
type="password"
class="input"
required
autocomplete="new-password"
/>
</div>
<label class="cluster is-snug no-wrap">
<input type="checkbox" class="input" required />
<span class="text--1">
I agree to the <a href="#">Terms of Service</a> and
<a href="#">Privacy Policy</a>
</span>
</label>
<button class="button" type="submit">Create account</button>
</form>
<p class="text-muted text--1 text-center">
Already have an account? <a href="#sign-in">Sign in</a>
</p>
</div>
</div>
Password reset
Only an email field; the form is replaced by a confirmation after submit.
<div class="card center" style="--center-max: 24rem">
<div class="flow">
<h2>Reset your password</h2>
<p class="text-muted">Enter your email and we'll send a link to set a new one.</p>
<form class="stack">
<div class="stack is-tight">
<label for="forgot-email">Email</label>
<input
id="forgot-email"
type="email"
class="input"
required
autocomplete="username"
/>
</div>
<button class="button" type="submit">Send reset link</button>
</form>
<p class="text-muted text--1 text-center">
Remembered it? <a href="#sign-in">Sign in</a>
</p>
</div>
</div>
After submit
The confirmation replaces the form. role="status" announces the change; an
alert would be the wrong role for something that is not an error.
<div class="center" style="--center-max: 24rem">
<div class="flow">
<h2>Reset your password</h2>
<div class="alert media is-success" role="status">
<svg
class="media-figure icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M20 6 9 17l-5-5" />
</svg>
<div class="media-body">
<h4>Check your email</h4>
<p>
We've sent a reset link to <strong>you@example.com</strong>. It expires
in 30 minutes.
</p>
</div>
</div>
<p class="text-muted text--1 text-center">
Didn't arrive? <a href="#">Resend</a> or <a href="#sign-in">sign in</a>.
</p>
</div>
</div>
Provider sign-in with email fallback
Providers first, email and password behind a labeled divider.
<div class="card center" style="--center-max: 24rem">
<div class="flow">
<h2>Sign in</h2>
<div class="stack is-tight">
<button class="button is-outlined" type="button">
<svg
class="icon"
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="10" />
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
<path d="M2 12h20" />
</svg>
Continue with Google
</button>
<button class="button is-outlined" type="button">
<svg
class="icon"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
>
<path
d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"
/>
</svg>
Continue with Apple
</button>
<button class="button is-outlined" type="button">
<svg
class="icon"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
>
<path
d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.57.11.78-.25.78-.55 0-.27-.01-.99-.02-1.95-3.2.7-3.88-1.54-3.88-1.54-.52-1.33-1.28-1.68-1.28-1.68-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.76 2.7 1.25 3.36.96.1-.74.4-1.25.73-1.54-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11.02 11.02 0 0 1 5.79 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.8 1.19 1.83 1.19 3.09 0 4.42-2.69 5.4-5.25 5.68.41.36.78 1.06.78 2.14 0 1.55-.01 2.8-.01 3.18 0 .31.21.67.79.55C20.22 21.38 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5z"
/>
</svg>
Continue with GitHub
</button>
</div>
<div class="divider">or</div>
<form class="stack">
<div class="stack is-tight">
<label for="oauth-email">Email</label>
<input
id="oauth-email"
type="email"
class="input"
required
autocomplete="username"
/>
</div>
<div class="stack is-tight">
<label for="oauth-password">Password</label>
<input
id="oauth-password"
type="password"
class="input"
required
autocomplete="current-password"
/>
</div>
<button class="button" type="submit">Sign in</button>
</form>
<p class="text-muted text--1 text-center">
Don't have an account? <a href="#sign-up">Sign up</a>
</p>
</div>
</div>