FormLayout

FormLayout gives create and edit screens a predictable structure for dense records: validation summary, grouped sections, responsive field grids, and sticky save actions.

Import

import {
  FormLayout,
  FormLayoutActions,
  FormLayoutGrid,
  FormLayoutSection,
  FormLayoutSectionDescription,
  FormLayoutSectionHeader,
  FormLayoutSectionTitle,
  FormLayoutValidationSummary,
} from '@nim-ui/components';

Basic Usage

Edit Order Form

View Code

<Form onSubmit={handleSubmit}>
  <FormLayout>
    <FormLayoutValidationSummary errors={errors} />
    <FormLayoutSection aria-labelledby="order-details-heading">
      <FormLayoutSectionHeader>
        <FormLayoutSectionTitle id="order-details-heading">Order details</FormLayoutSectionTitle>
        <FormLayoutSectionDescription>Core routing fields.</FormLayoutSectionDescription>
      </FormLayoutSectionHeader>
      <FormLayoutGrid columns={2}>
        <FormField label="Customer" name="customer" required>
          <Input />
        </FormField>
      </FormLayoutGrid>
    </FormLayoutSection>
    <FormLayoutActions aria-label="Order form actions">
      <Button variant="outline" type="button">Cancel</Button>
      <Button variant="primary" type="submit">Save changes</Button>
    </FormLayoutActions>
  </FormLayout>
</Form>

Props

FormLayout

Name	Type	Default	Description
density	'comfortable' | 'compact'	'comfortable'	Controls spacing between form sections.
className	string	-	Additional classes for page-level form layout.

FormLayoutGrid

Name	Type	Default	Description
columns	1 | 2 | 3	2	Responsive field grid. Narrow screens always render one column.

FormLayoutValidationSummary

Name	Type	Default	Description
errors *	{ label: ReactNode; message: ReactNode; href?: string }[]	-	Validation issues rendered inside a polite alert summary.
title	ReactNode	'Review these fields'	Summary heading shown above the validation list.

Backoffice Guidance

• Put record-blocking errors in FormLayoutValidationSummary so operators do not hunt field by field.
• Use one section per operational concern: identity, fulfillment, billing, permissions, audit notes.
• Keep FormLayoutActions sticky on long edit pages; use sticky={false} inside modals or drawers.