Layout Widgets Overview

Layout widgets are containers. They take a children array (a tabs/accordion takes a sections array of { label, uid, children }) and arrange them visually. They have no path and don’t write to form data themselves.

The DX shortcuts

import { gui } from '@golemui/gui-shared';

const formDef = [
  // Grid for rows — subgrid keeps labels and inputs aligned across all children.
  gui.layouts.grid([
    gui.inputs.textInput('user.firstName'),
    gui.inputs.textInput('user.lastName'),
  ]),

  // Flex for columns.
  gui.layouts.flex(
    [
      gui.inputs.textInput('user.email'),
      gui.inputs.password('user.password'),
    ],
    { direction: 'column' },
  ),

  // Tabs — first arg is sections, each with its own children.
  gui.layouts.tabs([
    { label: 'Personal', uid: 'personal', children: [/* ... */] },
    { label: 'Work', uid: 'work', children: [/* ... */] },
  ]),
];

Shortcut	Description
gui.layouts.flex	Flex container (Flex).
gui.layouts.horizontalFlex	Flex with direction: 'row'.
gui.layouts.verticalFlex	Flex with direction: 'column'.
gui.layouts.grid	Grid container with subgrid alignment (Grid).
gui.layouts.horizontalGrid	Grid with direction: 'row'.
gui.layouts.verticalGrid	Grid with direction: 'column'.
gui.layouts.tabs	Tabs (Tabs).
gui.layouts.accordion	Accordion (Accordion).
gui.layouts.custom	Plug in your own layout (Custom Widgets).

Layout recommendation

• Use grid for rows. CSS subgrid keeps labels, inputs, and validation messages aligned across every child in the row.
• Use flex for columns. Lighter, more flexible for vertical stacks.

JSON form

The same widget in JSON, with props and children separated:

{
  "form": [
    {
      "kind": "layout",
      "type": "grid",
      "props": { "direction": "row", "autoFit": true },
      "children": [
        { "kind": "input", "type": "textinput", "path": "user.firstName" },
        { "kind": "input", "type": "textinput", "path": "user.lastName" }
      ]
    }
  ]
}

Property	Description
uid	Optional unique id; one is generated if absent.
kind	MANDATORY. Always 'layout'.
type	MANDATORY. The layout type (flex, grid, tabs, accordion).
children	MANDATORY for flex / grid. An array of child widgets. (Tabs and accordion put children inside their sections.)
props	Layout-specific configuration — direction, gap, align/justify, etc. See each layout’s reference page.

Available widgets

• Accordion
• Flex
• Grid — recommended for rows
• Tabs

See also

• gui.layouts reference — every layout shortcut.
• Extending GolemUI / Layout Widget — build your own.