FormLayout Sectioned CRUD form layout for backoffice create and edit workflows
FormLayout gives create and edit screens a predictable structure for dense records: validation summary, grouped sections, responsive field grids, and sticky save actions.
import { FormLayout , FormLayoutActions , FormLayoutGrid , FormLayoutSection , FormLayoutSectionDescription , FormLayoutSectionHeader , FormLayoutSectionTitle , FormLayoutValidationSummary , } from '@nim-ui/components' ; Edit Order Form < 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 > Name Type Default Description density'comfortable' | 'compact''comfortable'Controls spacing between form sections. classNamestring- Additional classes for page-level form layout.
Name Type Default Description dividedbooleantrueAdds a rule between the section's header and its fields. Set to false to remove the separation.
Name Type Default Description columns1 | 2 | 32Responsive field grid. Narrow screens always render one column.
Name Type Default Description stickybooleantruePins the actions bar to the bottom of the scrolling container so save and cancel controls stay in view on long forms. Set to false inside modals or drawers, where the container already limits scrolling.
Name Type Default Description errors* { label: ReactNode; message: ReactNode; href?: string }[]- Validation issues rendered inside a polite alert summary. titleReactNode'Review these fields'Summary heading shown above the validation list.
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.