Skip to content
Gx
GitHub

Settings Form

A settings page block with profile and notification cards.

Open the preview in a new tab 

<settingsform.SettingsForm />

Installation

Run the command in the app module.

Terminal
gx add settings-form

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

The command writes these files.

File Path in the app
SettingsForm.gx ui/settings-form/SettingsForm.gx
SettingsForm.fixtures.go ui/settings-form/SettingsForm.fixtures.go

Install button, card, field, input and switch 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/settings-form/SettingsForm.gx
package settingsform

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

props {
  // Action is the URL that the form posts to. Empty posts to the current URL.
  Action gx.URL = ""
}

<div class="mx-auto flex w-full max-w-2xl flex-col gap-6">
  <form method="post" action={p.Action} class="flex flex-col gap-6">
    <card.Card title="Profile" description="Your public name and email.">
      <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" />
        </field.Field>
      </field.FieldGroup>
    </card.Card>
    <card.Card title="Notifications" description="Choose what reaches your inbox.">
      <field.FieldGroup>
        <field.Field orientation={field.Horizontal}>
          <field.FieldContent>
            <field.FieldTitle>Product news</field.FieldTitle>
            <field.FieldDescription>One message each month.</field.FieldDescription>
          </field.FieldContent>
          <switches.Switch name="news" label="Product news" />
        </field.Field>
        <field.FieldSeparator />
        <field.Field orientation={field.Horizontal}>
          <field.FieldContent>
            <field.FieldTitle>Security alerts</field.FieldTitle>
            <field.FieldDescription>Sign-in and password changes.</field.FieldDescription>
          </field.FieldContent>
          <switches.Switch name="alerts" label="Security alerts" checked={true} />
        </field.Field>
      </field.FieldGroup>
    </card.Card>
    <div class="flex justify-end">
      <button.Button type="submit">Save changes</button.Button>
    </div>
  </form>
</div>
ui/settings-form/SettingsForm.fixtures.go
package settingsform

import "github.com/alternayte/gx"

var SettingsFormFixtures = gx.Fixtures[SettingsFormProps]{
	"Default": {},
}

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

Usage

<settingsform.SettingsForm action="/settings" />

The block is copied source. Replace the raw form with a typed gx.Form when the app has rules for the fields.

Examples

Default

Open the preview in a new tab 

<settingsform.SettingsForm />

API reference

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

settingsform.SettingsForm

Prop Type Default Description
Action gx.URL "" Action is the URL that the form posts to. Empty posts to the current URL.

Do and do not

Do

  • Group related settings in one card.
  • Keep the save button after the last card.

Don't

  • Do not save each switch on its own.
  • Do not put more than three cards on one page.

Keyboard

Key Action
Tab Moves between fields, switches and the save button.
Space Toggles a switch.
Enter Submits the form from a field.