Skip to content
Gx
GitHub

Signup

A sign-up page block with fields, terms and a brand panel.

Open the preview in a new tab 

<signup.Signup title="Create an account" description="Start with your email." />

Installation

Run the command in the app module.

Terminal
gx add signup

The command also installs button, card, checkbox, field and input.

The command writes these files.

File Path in the app
Signup.gx ui/signup/Signup.gx
Signup.fixtures.go ui/signup/Signup.fixtures.go

Install button, card, checkbox, field and input first.

Copy each file to its path in the app. Change each import of a registry package to the path of that package in the app.

ui/signup/Signup.gx
package signup

import "github.com/alternayte/gx/registry/button"
import "github.com/alternayte/gx/registry/card"
import "github.com/alternayte/gx/registry/checkbox"
import "github.com/alternayte/gx/registry/field"
import "github.com/alternayte/gx/registry/input"

props {
  // Title is the heading of the card.
  Title       string = "Create an account"
  // Description is the text below the title.
  Description string = "Start with your email."
  // Action is the URL that the form posts to. Empty posts to the current URL.
  Action      gx.URL = ""
}

<div class="grid min-h-screen lg:grid-cols-2">
  <div class="flex items-center justify-center p-6">
    <card.Card title={p.Title} description={p.Description} class="w-full max-w-sm">
      <form method="post" action={p.Action}>
        <field.FieldGroup>
          <field.Field>
            <field.FieldLabel for="name">Name</field.FieldLabel>
            <input.Input id="name" name="name" type="text" />
          </field.Field>
          <field.Field>
            <field.FieldLabel for="email">Email</field.FieldLabel>
            <input.Input id="email" name="email" type="email" placeholder="you@example.com" />
          </field.Field>
          <field.Field>
            <field.FieldLabel for="password">Password</field.FieldLabel>
            <input.Input id="password" name="password" type="password" />
            <field.FieldDescription>At least 12 characters.</field.FieldDescription>
          </field.Field>
          <checkbox.Checkbox name="terms">I accept the terms</checkbox.Checkbox>
          <div class="flex flex-col gap-3">
            <button.Button type="submit" class="w-full">Create account</button.Button>
            <p class="text-center text-sm text-muted-foreground">Already have an account? <a href="/login" class="underline underline-offset-4 hover:text-primary">Sign in</a></p>
          </div>
        </field.FieldGroup>
      </form>
    </card.Card>
  </div>
  <div class="hidden flex-col justify-between bg-muted p-10 lg:flex">
    <a href="/" class="font-semibold no-underline">Gx</a>
    <p class="max-w-sm text-sm text-foreground/80">Typed templates, routes and forms in one loop.</p>
  </div>
</div>
ui/signup/Signup.fixtures.go
package signup

import "github.com/alternayte/gx"

var SignupFixtures = gx.Fixtures[SignupProps]{
	"Default": {Title: "Create an account", Description: "Start with your email."},
}

The theme must define these tokens: --muted, --muted-foreground, --border, --card, --primary, --primary-foreground, --ring, --input.

Usage

<signup.Signup action="/signup" />

The block is copied source. Replace the raw form with a typed gx.Form and route input when the app has its sign-up route.

Examples

Default

Open the preview in a new tab 

<signup.Signup title="Create an account" description="Start with your email." />

API reference

A tag sets a prop by its name with a lower-case first letter: Class is class.

signup.Signup

Prop Type Default Description
Title string "Create an account" Title is the heading of the card.
Description string "Start with your email." Description is the text below the title.
Action gx.URL "" Action is the URL that the form posts to. Empty posts to the current URL.

Do and do not

Do

  • State the password rule in the hint.
  • Keep the terms checkbox next to the submit button.

Don't

  • Do not ask for data the app does not need.
  • Do not submit before the terms are accepted.

Keyboard

Key Action
Tab Moves between fields, the terms checkbox and the button.
Space Toggles the terms checkbox.
Enter Submits the form from a field.