gui.layouts reference

Every layout shortcut takes a children array. Most also take a props object as the second argument. gui.layouts.tabs and gui.layouts.accordion are exceptions — they take a sections array instead, where each section has its own label and children.

Signature

Most layouts:

gui.layouts.<shortcut>(children: ValidGuiShortcut[], props?: Props, tags?: string[]): GuiLayoutsShortcut;

Tabs / accordion:

gui.layouts.tabs(sections: TabSection[], props?: Props, tags?: string[]): GuiTabsShortcut;
gui.layouts.accordion(sections: AccordionSection[], props?: Props, tags?: string[]): GuiAccordionShortcut;

A fully-populated flex example:

gui.layouts.flex(
  [
    // children — any array of gui.* shortcuts
    gui.inputs.textInput('first', { label: 'First name' }),
    gui.inputs.textInput('last', { label: 'Last name' }),
  ],
  {
    // props — the layout's typed props + DX fields
    direction: 'row',
    gap: 12,
    size: 1,
    states: {
      // per-state overrides
      compactMode: { direction: 'column' },
    },
    include: { in: ['hasName'] },
  },
  ['identity-row'], // tags — addressable groups for selectors
);

A tabs example with two sections:

gui.layouts.tabs([
  {
    label: 'Delivery address',
    children: [
      gui.inputs.textInput('delivery.street', { label: 'Street' }),
      gui.inputs.textInput('delivery.city', { label: 'City' }),
    ],
  },
  {
    label: 'Invoice address',
    children: [
      gui.inputs.textInput('invoice.street', { label: 'Street' }),
      gui.inputs.textInput('invoice.city', { label: 'City' }),
    ],
  },
]);

Shortcuts

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

Layout recommendation

• Use grid for rows. It enables CSS subgrid so labels, inputs, and validation messages line up across all children in a row.
• Use flex for columns. Lighter, more flexible for vertical stacks.

See also

• Tabs and Accordion — both take a sections array as the first arg, where each section has its own children.