Skip to main content

Form Input Label Alignment

Every field on a form has a label (its title) and an input (the edit box / value). Form Input Label Alignment decides where the label sits relative to that input — above it, beside it on the left, or below it.

Everything about building the form — containers, fields, widgets — works exactly as described in Forms. This page covers only where field labels are positioned and how that is configured.

Key Concept

There are three levels of control, from broadest to most specific:

  1. A global default in Design Studio → Page Templates → Template Settings → Form tab, applied to every form. Options: Top / Left / Bottom. Default Top.
  2. A per-form default in the form's Form Details settings, applied to every container in that one form. Options add Inherit (the default) — inherit the global template setting.
  3. A per-container setting (in each Fields container's ⚙ settings). Options add Inherit (the default) — inherit the form's setting.

Because forms and containers default to Inherit and the global default is Top, existing forms keep behaving exactly as they always have — each label sits above its input until an administrator chooses otherwise.

Alignment options​

OptionWhat it does
InheritForm & container level only, and their default. Defer to the broader tier — a container inherits the form, a form inherits the global template.
TopThe label sits above the input. This is the global default.
LeftThe label sits beside the input, in a column to its left.
BottomThe label sits below the input.

Global default — Page Templates​

Open Design Studio → Page Templates, open Template Settings, and switch to the Form tab. Under Form Input Label Alignment choose Top, Left, or Bottom. The template level has no Inherit option — it is the base everything else can fall back to. Default Top.

This value applies to every Design Studio form (Create, Edit, View, Quick Edit, and Edit Relation) unless a specific form or container overrides it.

Per-form default — Form Details settings​

Open a form's Form Details settings (the settings panel for the form itself, alongside options like Form Mode and All Containers Fit Content). Under Form Input Label Alignment choose Inherit, Top, Left, or Bottom.

  • Choose a concrete value (Top/Left/Bottom) to apply it to every Fields container in that one form, overriding the global default.
  • Leave it as Inherit (the default) and the form follows the global Page Templates setting.

Use this when a single form should look different from the system-wide default, without having to set each container individually.

Per-container override — Form Builder​

Open a Fields container's Settings ⚙ in the Form Builder. Under the styling settings you'll find Form Input Label Alignment with Inherit / Top / Left / Bottom options.

  • Choose a concrete value to override both defaults for that container only.
  • Leave it as Inherit (the default) and the container follows the form-level setting (which, in turn, may inherit the global template).

The control appears only for Fields containers — Standard, Custom, and Separator containers don't render field labels, so it doesn't apply to them.

Precedence

For each field, the alignment is resolved from the most specific tier that is not set to Inherit:

Container (if not Inherit) → Form (if not Inherit) → Global template → Top

A container's own concrete setting always wins; if it inherits, the form's setting is used; if the form also inherits, the global Form-tab value applies; if nothing concrete is set anywhere, labels render on Top.

Sample rendering​

Top (default) — label above the input:

┌─────────────────────────┐
│ Field Label             │
│ ┌─────────────────────┐ │
│ │ input               │ │
│ └─────────────────────┘ │
└─────────────────────────┘

Left — label beside the input, in a left column:

┌─────────────────────────────────────┐
│ Field Label   ┌─────────────────────┐│
│               │ input               ││
│               └─────────────────────┘│
└─────────────────────────────────────┘

Bottom — label below the input:

┌─────────────────────────┐
│ ┌─────────────────────┐ │
│ │ input               │ │
│ └─────────────────────┘ │
│ Field Label             │
└─────────────────────────┘

In Left mode a long field label wraps within its column instead of overlapping the input, and input adornments (such as numeric prefixes/suffixes) stay aligned with the edit box.

When to use it​

  • Inherit (form & container default) — keep following the broader setting; the safe choice unless this form or section genuinely needs to differ.
  • Top (global default) — the most compact, works well on narrow screens and for most forms.
  • Left — a more traditional, dense "label : value" look; best on wider layouts where the extra label column fits comfortably.
  • Bottom — when you want the input to lead and the label to act as a caption underneath.

Set the concrete value globally for a consistent look across all forms, override it at the per-form level when one form should differ as a whole, and reach for the per-container override only where a particular section within a form should stand apart. Leave Inherit everywhere else.

Notes​

  • These settings apply to Design Studio Forms — Create, Edit, View, Quick Edit, and Edit Relation forms. They do not affect dashboards, relation grids, or data grids.
  • Boolean fields configured to show the checkbox before or after their label keep that field-level layout and are unaffected by this setting.
  • Because forms and containers default to Inherit and the global default is Top, upgrading has no visible effect on existing forms until an administrator chooses a concrete alignment (globally, per form, or per container).

Next Steps​