form · Normal DOM only

FormSection · FormRow · FormGroup

Composition primitives for typical settings / record-edit forms.

FormSection is the heading-plus-body wrapper, FormRow is a single field with its label-above-or-beside layout, FormGroup is a two-or-more column grid. Combine them to express almost any business form without writing layout from scratch.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { FormSection, FormRow, FormGroup } from '@8maverik8/twenty-design';

Examples

Stacked rows (narrow surfaces)

Workspace settings

Visible to everyone in your workspace.

https://app.twenty.com/<slug>
tsx
<FormSection title="Workspace settings">…

Inline rows (settings)

Notifications

How you want to be reached when things happen.

Daily summary at 9:00.
work@example.com
tsx
<FormRow label="…" layout="inline">…

Multi-column FormGroup

Address

United Kingdom
tsx
<FormGroup columns={2}>…

Sectioned settings page

General

Danger zone

Deleting your workspace is permanent. We will keep an encrypted backup for 30 days.
tsx
<FormSection title="General">…<Divider /><FormSection title="Danger zone">…

Anatomy

FormSectionTitle + description + actions, slots a column of FormRows below.
FormRow layout="stacked"Label above, control fills row width — default for narrow forms.
FormRow layout="inline"Label on the left in a fixed column, control on the right — for settings pages.
FormGroupCSS-grid container that lays N FormRows across `columns` columns.

Guidelines

✓
Pick one layout per FormSection and stick to it.Mixing stacked + inline rows reads as alignment bugs.
✓
Separate semantic sections (general / danger / billing) with Divider.Long forms without breakpoints make users lose place.