Inline when

Sometimes you need a condition that’s only used once. Naming it as a state would be overkill. Use { when: '<expression>' } to express it inline directly on the widget.

Inline when accepts the same reactive expression syntax as named states — $form.<path>, comparisons, logical operators.

A complete example

A “Number of pets” input that only renders when the user opted into pet-friendly hotels.

No formConfig.states entry is needed — the expression sits on the widget.

React

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

const formDef = [
  gui.inputs.booleanInput('includePets', { label: 'I am traveling with pets' }),
  gui.inputs.numberInput('pets', {
    label: 'Number of pets',
    include: { when: '$form.includePets === true' },
  }),
];

export function MyForm() {
  return <GuiForm config={{ formDef }} />;
}

Angular

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { gui } from '@golemui/gui-shared';
import { FormComponent } from '@golemui/gui-angular';

@Component({
  imports: [CommonModule, FormComponent],
  selector: 'app-my-form',
  template: `<gui-form [config]="config"></gui-form>`,
})
export class MyForm {
  protected config = {
    formDef: [
      gui.inputs.booleanInput('includePets', { label: 'I am traveling with pets' }),
      gui.inputs.numberInput('pets', {
        label: 'Number of pets',
        include: { when: '$form.includePets === true' },
      }),
    ],
  };
}

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { gui } from '@golemui/gui-shared';
import '@golemui/gui-lit';

@customElement('my-form')
export class MyForm extends LitElement {
  config = {
    formDef: [
      gui.inputs.booleanInput('includePets', { label: 'I am traveling with pets' }),
      gui.inputs.numberInput('pets', {
        label: 'Number of pets',
        include: { when: '$form.includePets === true' },
      }),
    ],
  };

  override createRenderRoot() { return this; }

  override render() {
    return html`<gui-form .config=${this.config}></gui-form>`;
  }
}

Vue

<script setup lang="ts">
import { gui } from '@golemui/gui-shared';
import { GuiForm } from '@golemui/gui-vue';

const config = {
  formDef: [
    gui.inputs.booleanInput('includePets', { label: 'I am traveling with pets' }),
    gui.inputs.numberInput('pets', {
      label: 'Number of pets',
      include: { when: '$form.includePets === true' },
    }),
  ],
};
</script>

<template>
  <GuiForm :config="config" />
</template>

Vanilla JS

import '@golemui/gui-components/index.css';
import '@golemui/gui-lit';
import { gui } from '@golemui/gui-shared';

const form = document.getElementById('app-form');
form.config = {
  formDef: [
    gui.inputs.booleanInput('includePets', { label: 'I am traveling with pets' }),
    gui.inputs.numberInput('pets', {
      label: 'Number of pets',
      include: { when: '$form.includePets === true' },
    }),
  ],
};

No "states" block is needed — the expression sits on the widget.

{
  "form": [
    {
      "kind": "input",
      "type": "checkbox",
      "path": "includePets",
      "label": "I am traveling with pets"
    },
    {
      "kind": "input",
      "type": "number",
      "path": "pets",
      "label": "Number of pets",
      "include": { "when": "$form.includePets === true" }
    }
  ]
}

Wire the parsed JSON into your form component the same way as any other JSON formDef:

React

import { GuiForm } from '@golemui/gui-react';
import formDef from './my-form.json';

export function MyForm() {
  return <GuiForm config={{ formDef }} />;
}

Angular

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormComponent } from '@golemui/gui-angular';
import formDef from './my-form.json';

@Component({
  imports: [CommonModule, FormComponent],
  selector: 'app-my-form',
  template: `<gui-form [config]="config"></gui-form>`,
})
export class MyForm {
  protected config = { formDef };
}

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import '@golemui/gui-lit';
import formDef from './my-form.json';

@customElement('my-form')
export class MyForm extends LitElement {
  config = { formDef };

  override createRenderRoot() { return this; }

  override render() {
    return html`<gui-form .config=${this.config}></gui-form>`;
  }
}

Vue

<script setup lang="ts">
import { GuiForm } from '@golemui/gui-vue';
import formDef from './my-form.json';

const config = { formDef };
</script>

<template>
  <GuiForm :config="config" />
</template>

Vanilla JS

import '@golemui/gui-components/index.css';
import '@golemui/gui-lit';
import formDef from './my-form.json';

const form = document.getElementById('app-form');
form.config = { formDef };

When to inline vs name

• Use inline when when the condition appears once and reads naturally at the call site.
• Use a named state when the same condition gates multiple widgets, drives prop overrides, or is referenced from event handlers.

See also

• Include & Exclude — gating with active-state lists.
• Form Definition API / States — the expression language.