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.

How to define them

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: [
        /* ... */
      ],
    },
  ]),
];

flex and grid also have direction-preset variants — gui.layouts.horizontalFlex / verticalFlex / horizontalGrid / verticalGrid — equivalent to passing { direction: 'row' } or { direction: 'column' } explicitly. See the gui.layouts reference for the full list.

Same outcome in JSON — flex/grid carry children directly; tabs and accordion declare their sections in props.tabs/props.sections and bind each section’s content to a child by matching uid:

{
  "form": [
    {
      "kind": "layout",
      "type": "grid",
      "children": [
        { "kind": "input", "type": "textinput", "path": "user.firstName" },
        { "kind": "input", "type": "textinput", "path": "user.lastName" }
      ]
    },
    {
      "kind": "layout",
      "type": "flex",
      "props": { "direction": "column" },
      "children": [
        { "kind": "input", "type": "textinput", "path": "user.email" },
        { "kind": "input", "type": "password", "path": "user.password" }
      ]
    },
    {
      "kind": "layout",
      "type": "tabs",
      "props": {
        "tabs": [
          { "uid": "personal", "label": "Personal" },
          { "uid": "work", "label": "Work" }
        ]
      },
      "children": [
        { "uid": "personal", "kind": "layout", "type": "flex", "children": [] },
        { "uid": "work", "kind": "layout", "type": "flex", "children": [] }
      ]
    }
  ]
}

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 match each child by uid to a section declared in props.)
props	Layout-specific configuration — direction, gap, align/justify, tab/section definitions, etc. See each layout’s reference page.

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.

Available widgets

Widget	DX shortcut	Reference
Flex	gui.layouts.flex	Flex
Grid	gui.layouts.grid	Grid — recommended for rows
Tabs	gui.layouts.tabs	Tabs
Accordion	gui.layouts.accordion	Accordion
Custom	gui.layouts.custom	Custom Widgets

See also

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