Skip to content
NockerlDesignv2.0.0

Form layout

In review
Live · web
Required
Profile

Shown on your sessions and in the team directory.

Your display name across Nockerl.

Optional. Shown in the team directory.

A sentence or two. Markdown is supported.

PreferencesOptional

Defaults for new sessions and how we reach you.

Optional. The default for new sessions.

Weekly digestA Monday summary of every session's activity.
MentionsNotify me when an agent needs a decision.
Product updatesOccasional notes on new Nockerl features.
Preferences sync to every session on this account within a minute.

Code

Section titled “Code”
// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform; this is the intended API,
// not yet exported from @dizyx/nockerl-react (promotion tracked).) Form layout is the COMPOSITION that
// arranges fields: the section (a lifted card + header), the row grid (single/two
// column), the settings row (label+desc left, control right), and the actions footer.
// The fields themselves are NockerlTextField / ValidatedField; this is the scaffold around them.
import { NockerlButton, NockerlTextField, NockerlSwitch } from '@dizyx/nockerl-react';


export function AccountForm() {
  return (
    <Form onSubmit={save} aria-label="Account settings" maxWidth="md">
      <FormSection title="Profile" description="Shown on your sessions and in the directory.">
        <FormRow columns={2}>
          <NockerlTextField label="Full name" required value={name} onValueChange={setName} />
          <NockerlTextField label="Handle" required leadingIcon="@" value={handle} onValueChange={setHandle} />
          <NockerlTextField label="Work email" type="email" required span value={email} onValueChange={setEmail} />
          <Select label="Role" optional value={role} onValueChange={setRole} options={roles} />
        </FormRow>
      </FormSection>


      <FormSection title="Preferences" optional description="Defaults for new sessions and how we reach you.">
        <SettingRow label="Weekly digest" description="A Monday summary of every session.">
          <NockerlSwitch checked={digest} onChange={setDigest} ariaLabel="Weekly digest" />
        </SettingRow>
        <SettingRow label="Mentions" description="Notify me when an agent needs a decision.">
          <NockerlSwitch checked={mentions} onChange={setMentions} ariaLabel="Mentions" />
        </SettingRow>
      </FormSection>


      <FormActions sticky={false}>
        <NockerlButton text="Cancel" variant="ghost" onClick={cancel} />
        <NockerlButton text="Save changes" variant="primary" type="submit" loading={saving} />
      </FormActions>
    </Form>
  );
}

Parameters

Section titled “Parameters”
PropTypeDefaultDescription
Form · onSubmit(e: FormEvent) => voidSubmit handler on the underlying <form>. Wire the primary action’s type="submit" to it so Enter submits.
Form · maxWidth'sm' | 'md' | 'lg' | number'md'Bounded content width so sections, the two-column grid, and the footer all align to one edge.
FormSection · title *stringSection header, rendered uppercase + tracked in the muted token (the Voice SettingsCard idiom).
FormSection · descriptionstringOne muted help line under the header.
FormSection · optionalbooleanfalseMarks a whole section optional with an Optional tag beside the title.
FormSection · headerAccessoryReactNodeOptional slot trailing the header, center-aligned: the ⓘ InfoTip seat (settings grammar, task 2657). Empty → the header renders exactly as before.
FormSection · footerReactNodeOptional card footer INSIDE the section under a full-bleed hairline, for muted hints or quiet section actions (settings grammar, task 2657).
FormRow · columns1 | 21Single-column (stacked) or two-column grid. Fields stay aligned to the grid; collapses to one column when narrow.
field · spanbooleanfalseIn a two-column row, makes a field span both columns (e.g. email, bio).
field · requiredbooleanfalseAdds a status-colored * and sets the control required. Paired with a form-level legend, never color alone.
field · optionalbooleanfalseAdds an Optional marker for forms that mark optional rather than required.
SettingRow · label / description *stringThe settings-style row: label + description on the LEFT, a control (its child) on the RIGHT. The control is a separate focusable target.
FormActions · stickybooleanfalsePins the right-aligned Cancel/Save footer to the bottom of the scroll area on long forms.