Selectors

Selectors are the behavior layer of the Form Definition API. While gui.inputs.*, gui.layouts.*, etc. describe the form’s structure, gui.selectors.* describes how those widgets should look and behave — by type, by tag, or by uid — without you having to weave that behavior into every shortcut call.

A selector is built by chaining methods off the gui.selectors root, then matching a target type and supplying a config:

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

const formSelectors = [
  // Suppress auto-labels on every input
  gui.selectors.inputs({ suppressAutomaticLabels: true }),

  // For inputs tagged 'identity', also suppress auto-placeholders
  gui.selectors.tag('identity').inputs({ suppressAutomaticPlaceholders: true }),

  // Hide a specific dropdown by uid in a particular state
  gui.selectors.state('loaded').dropdownByUid('country', { disabled: false }),
];

Pass the array as formSelectors inside the config object:

React

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

const config = { formDef, formSelectors };
// <GuiForm config={config} />

Angular

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
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, formSelectors };
}

Lit

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

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

  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';

const config = { formDef, formSelectors };
</script>

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

Vanilla JS

import '@golemui/gui-components/index.css';
import '@golemui/gui-lit';

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

Read on

• Type selectors — inputs, dropdowns, actions, etc.
• Chaining — composing scope methods.
• Scope operators — tag, state.
• Multi-value scope operators — tagsAnd, tagsOr.
• Sensible defaults — what the engine auto-fills for you.
• Precedence — the merge order between defaults, selectors, and shortcut props.

See also

• Form Definition Overview — the full gui.* namespace.