Sign up
Centered sign-up form on a muted background. Uses Rizzo form components and design tokens. Copy and paste into your app.
This block is a sign-up page: centered form card with optional brand link, name, email, and password fields, submit button, and link to sign in. Use it as a starting point for registration screens. Same BEM and tokens work in any framework.
Preview
Sign-up form using design tokens and form-input classes.
Usage
Copy the snippet for your framework. Same BEM classes and structure work everywhere.
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React
astro astro
---
// Astro: static form; add client:load for client-side validation if needed.
---
<div class="signup-block">
<a href="/" class="signup-block__brand" aria-label="Home">
<span class="signup-block__brand-icon" aria-hidden="true">R</span>
Acme
</a>
<form class="signup-block__form" action="#" method="post" aria-labelledby="signup-heading">
<h2 id="signup-heading" class="signup-block__title">Create account</h2>
<div class="form-group">
<label for="signup-name" class="label">Name</label>
<input type="text" id="signup-name" name="name" class="form-input" placeholder="Jane Doe" autocomplete="name" />
</div>
<div class="form-group">
<label for="signup-email" class="label">Email</label>
<input type="email" id="signup-email" name="email" class="form-input" placeholder="you@example.com" autocomplete="email" />
</div>
<div class="form-group">
<label for="signup-password" class="label">Password</label>
<input type="password" id="signup-password" name="password" class="form-input" placeholder="••••••••" autocomplete="new-password" />
</div>
<button type="submit" class="btn btn-primary" style="width: 100%;">Create account</button>
</form>
<p class="signup-block__footer">
Already have an account? <a href="/login">Sign in</a>
</p>
</div> html html
<!-- Vanilla: ensure Rizzo CSS loaded. Same BEM. -->
<div class="signup-block">
<a href="/" class="signup-block__brand" aria-label="Home">
<span class="signup-block__brand-icon" aria-hidden="true">R</span>
Acme
</a>
<form class="signup-block__form" action="#" method="post" aria-labelledby="signup-heading">
<h2 id="signup-heading" class="signup-block__title">Create account</h2>
<div class="form-group">
<label for="signup-name" class="label">Name</label>
<input type="text" id="signup-name" name="name" class="form-input" placeholder="Jane Doe" autocomplete="name" />
</div>
<div class="form-group">
<label for="signup-email" class="label">Email</label>
<input type="email" id="signup-email" name="email" class="form-input" placeholder="you@example.com" autocomplete="email" />
</div>
<div class="form-group">
<label for="signup-password" class="label">Password</label>
<input type="password" id="signup-password" name="password" class="form-input" placeholder="••••••••" autocomplete="new-password" />
</div>
<button type="submit" class="btn btn-primary" style="width: 100%;">Create account</button>
</form>
<p class="signup-block__footer">
Already have an account? <a href="/login">Sign in</a>
</p>
</div> svelte svelte
<script>
// Svelte: same BEM; bind inputs with bind:value for reactive form.
</script>
<div class="signup-block">
<a href="/" class="signup-block__brand" aria-label="Home">
<span class="signup-block__brand-icon" aria-hidden="true">R</span>
Acme
</a>
<form class="signup-block__form" action="#" method="post" aria-labelledby="signup-heading">
<h2 id="signup-heading" class="signup-block__title">Create account</h2>
<div class="form-group">
<label for="signup-name" class="label">Name</label>
<input type="text" id="signup-name" name="name" class="form-input" placeholder="Jane Doe" autocomplete="name" />
</div>
<div class="form-group">
<label for="signup-email" class="label">Email</label>
<input type="email" id="signup-email" name="email" class="form-input" placeholder="you@example.com" autocomplete="email" />
</div>
<div class="form-group">
<label for="signup-password" class="label">Password</label>
<input type="password" id="signup-password" name="password" class="form-input" placeholder="••••••••" autocomplete="new-password" />
</div>
<button type="submit" class="btn btn-primary" style="width: 100%;">Create account</button>
</form>
<p class="signup-block__footer">
Already have an account? <a href="/login">Sign in</a>
</p>
</div> vue vue
<script setup>
// Vue: same BEM; use v-model for inputs.
</script>
<template>
<div class="signup-block">
<a href="/" class="signup-block__brand" aria-label="Home">
<span class="signup-block__brand-icon" aria-hidden="true">R</span>
Acme
</a>
<form class="signup-block__form" action="#" method="post" aria-labelledby="signup-heading">
<h2 id="signup-heading" class="signup-block__title">Create account</h2>
<div class="form-group">
<label for="signup-name" class="label">Name</label>
<input type="text" id="signup-name" name="name" class="form-input" placeholder="Jane Doe" autocomplete="name" />
</div>
<div class="form-group">
<label for="signup-email" class="label">Email</label>
<input type="email" id="signup-email" name="email" class="form-input" placeholder="you@example.com" autocomplete="email" />
</div>
<div class="form-group">
<label for="signup-password" class="label">Password</label>
<input type="password" id="signup-password" name="password" class="form-input" placeholder="••••••••" autocomplete="new-password" />
</div>
<button type="submit" class="btn btn-primary" style="width: 100%;">Create account</button>
</form>
<p class="signup-block__footer">
Already have an account? <a href="/login">Sign in</a>
</p>
</div>
</template> tsx tsx
export function SignupBlock() {
return (
<div className="signup-block">
<a href="/" className="signup-block__brand" aria-label="Home">
<span className="signup-block__brand-icon" aria-hidden="true">R</span>
Acme
</a>
<form className="signup-block__form" action="#" method="post" aria-labelledby="signup-heading">
<h2 id="signup-heading" className="signup-block__title">Create account</h2>
<div className="form-group">
<label htmlFor="signup-name" className="label">Name</label>
<input type="text" id="signup-name" name="name" className="form-input" placeholder="Jane Doe" autoComplete="name" />
</div>
<div className="form-group">
<label htmlFor="signup-email" className="label">Email</label>
<input type="email" id="signup-email" name="email" className="form-input" placeholder="you@example.com" autoComplete="email" />
</div>
<div className="form-group">
<label htmlFor="signup-password" className="label">Password</label>
<input type="password" id="signup-password" name="password" className="form-input" placeholder="••••••••" autoComplete="new-password" />
</div>
<button type="submit" className="btn btn-primary" style={{ width: '100%' }}>Create account</button>
</form>
<p className="signup-block__footer">
Already have an account? <a href="/login">Sign in</a>
</p>
</div>
);
}Components used
- Rizzo form classes (
form-input,label,form-group) - Button —
btn btn-primaryfor submit - Design tokens for spacing, radius, and colors