Register Page

New account registration form with field validation, password strength, and terms acceptance.

Components used

Button · Input · Checkbox · Card · Badge

Preview · Register Page

Code

HTML · @primus/ui-core

<div style="min-height:520px;display:flex;align-items:center;justify-content:center;background:var(--muted);width:100%;padding:2rem;box-sizing:border-box">
  <div class="card" style="width:100%;max-width:460px;padding:2.5rem">
    <div style="text-align:center;margin-bottom:2rem">
      <div style="display:inline-flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
        <div style="width:32px;height:32px;background:var(--primary);border-radius:6px;display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:0.875rem">P</div>
        <span style="font-weight:700;font-size:1.1rem">Primus Admin</span>
      </div>
      <h1 style="margin:0;font-size:1.375rem;font-weight:700">Create your account</h1>
      <p style="margin:0.5rem 0 0;font-size:0.875rem;color:var(--muted-foreground)">Get started in under 2 minutes</p>
    </div>

    <div class="vstack" style="gap:1rem">
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem">
        <div data-field>
          <label for="fname">First name</label>
          <input id="fname" type="text" placeholder="Jane" autocomplete="given-name" />
        </div>
        <div data-field>
          <label for="lname">Last name</label>
          <input id="lname" type="text" placeholder="Doe" autocomplete="family-name" />
        </div>
      </div>

      <div data-field>
        <label for="reg-email">Work email</label>
        <input id="reg-email" type="email" placeholder="name@company.com" autocomplete="email" />
        <span data-hint>Use your company email address</span>
      </div>

      <div data-field>
        <label for="company">Company name</label>
        <input id="company" type="text" placeholder="Acme Corp" autocomplete="organization" />
      </div>

      <div data-field="error">
        <label for="reg-pass">Password</label>
        <input id="reg-pass" type="password" placeholder="Min. 8 characters" aria-invalid="true" />
        <span class="error">Password must be at least 8 characters and include a number.</span>
      </div>

      <!-- Password strength -->
      <div>
        <div style="display:flex;justify-content:space-between;font-size:0.75rem;margin-bottom:4px">
          <span style="color:var(--muted-foreground)">Password strength</span>
          <span style="color:var(--warning);font-weight:500">Medium</span>
        </div>
        <div style="height:4px;background:var(--border);border-radius:4px;overflow:hidden">
          <div style="width:60%;height:100%;background:var(--warning);border-radius:4px;transition:width 0.3s"></div>
        </div>
      </div>

      <label style="display:flex;align-items:flex-start;gap:0.75rem;font-size:0.875rem">
        <input type="checkbox" style="margin-top:2px;flex-shrink:0" />
        <span>I agree to the <a href="#" style="color:var(--primary)">Terms of Service</a> and <a href="#" style="color:var(--primary)">Privacy Policy</a></span>
      </label>

      <button style="width:100%;justify-content:center">Create account</button>
    </div>

    <p style="text-align:center;font-size:0.8rem;color:var(--muted-foreground);margin:1.5rem 0 0">
      Already have an account? <a href="#" style="color:var(--primary)">Sign in</a>
    </p>
  </div>
</div>

React

import { PrimusInput, PrimusButton, PrimusCheckbox } from 'primus-react-ui';

export function RegisterPage() {
  const [form, setForm] = useState({
    firstName: '', lastName: '', email: '',
    company: '', password: '',
    agreed: false,
  });

  return (
    <div className="auth-shell">
      <div className="card" style={{ maxWidth: 460, padding: '2.5rem' }}>
        <h1>Create your account</h1>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
          <PrimusInput label="First name" value={form.firstName}
            onChange={v => setForm(f => ({ ...f, firstName: v }))} />
          <PrimusInput label="Last name" value={form.lastName}
            onChange={v => setForm(f => ({ ...f, lastName: v }))} />
        </div>

        <PrimusInput label="Work email" type="email" value={form.email}
          hint="Use your company email address"
          onChange={v => setForm(f => ({ ...f, email: v }))} />

        <PrimusInput label="Company name" value={form.company}
          onChange={v => setForm(f => ({ ...f, company: v }))} />

        <PrimusInput label="Password" type="password" value={form.password}
          onChange={v => setForm(f => ({ ...f, password: v }))} />

        <PrimusCheckbox
          label="I agree to the Terms of Service and Privacy Policy"
          checked={form.agreed}
          onChange={v => setForm(f => ({ ...f, agreed: v }))} />

        <PrimusButton style={{ width: '100%' }} disabled={!form.agreed}>
          Create account
        </PrimusButton>
      </div>
    </div>
  );
}

Angular

<div class="auth-shell">
  <div class="card auth-card">
    <h1>Create your account</h1>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem">
      <primus-input label="First name" [(value)]="form.firstName"></primus-input>
      <primus-input label="Last name"  [(value)]="form.lastName"></primus-input>
    </div>

    <primus-input label="Work email" type="email"
      [(value)]="form.email"
      hint="Use your company email address">
    </primus-input>

    <primus-input label="Company name" [(value)]="form.company"></primus-input>

    <primus-input label="Password" type="password"
      [(value)]="form.password" [error]="passwordError">
    </primus-input>

    <primus-checkbox
      label="I agree to the Terms of Service and Privacy Policy"
      [(checked)]="form.agreed">
    </primus-checkbox>

    <primus-button style="width:100%"
      [disabled]="!form.agreed" (clicked)="onSubmit()">
      Create account
    </primus-button>
  </div>
</div>