Forms · Page template

Simple Form

A focused single-screen form — labels, inputs, validation, submit. No multi-step ceremony.

app.example.com/settings/profile
What it is

When to reach for it.

The canonical single-screen form. Vertical stack of labeled inputs with inline validation, a primary Submit button, and a quiet secondary Cancel. For collecting structured input from a user without the overhead of a multi-step wizard.

  • Building a 'create record' or 'update record' screen that fits comfortably on one page.
  • Anywhere multi-step would be ceremony rather than value.
  • Quick-action surfaces — invite a user, add a contact, submit a request.
Structure

What's in the template.

Each section pre-wired with the right CleenUI primitives. Swap, remove, or extend any of them — the template is a starting point, not a constraint.

  1. 1

    Page header

    Title + one-line description of the form's purpose.

    Heading
  2. 2

    Form fields

    Labels above inputs; inline validation messages below.

    InputSelectToggle
  3. 3

    Action row

    Cancel on the left (ghost), Submit on the right (primary).

    Button
Components used

Everything this template touches.

All of these are in the catalog — the Builder skill imports them automatically. Each chip links to that component's page.

InputSelectToggleButtonHeadingForm
What you customize

Substitutions.

When the Builder skill scaffolds this template for you, these are the fields it asks about — or infers from your prompt.

FieldExampleWhere it appears
formTitleInvite a userPage heading + Submit button label
fieldsEmail · Role · Welcome messageForm-field stack
submitLabelSend invitePrimary action button
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Ask your AI agent to scaffold this template in your project — the Builder skill knows the Simple Form layout and the components it uses.

Get started

Get started with CleenUI.

Two paths to your first component. Pick the one that fits how your team builds.

Path A · Recommended

With AI agent skills

One prompt to your AI tool. The Setup skill handles dependencies, design tokens, build config, and component registration — all without leaving your editor.

Path B · Manual

With npm

The classic flow. Install the package, import the styles, drop in your first component. No agents required — same end result.