gui.selectors reference

gui.selectors is a chain root. You build a selector by composing zero or more scope methods (intermediate, return a new chain) and ending with one leaf method (terminal, returns a GslLeafSelector you put in formSelectors).

Signature

gui.selectors                         // chain root
  .<scopeMethod>(...)                 // 0+ — narrow the match
  .<leafMethod>(uid?, config)         // 1  — declare what to apply

// → produces a GslLeafSelector that goes in `formSelectors`.

A fully-populated example combining a tag scope, a state scope, and a type-leaf:

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

const formSelectors = [
  // Apply to every dropdown tagged 'us-state' while the
  // 'editing' state is active. Override `items` and add a hint.
  gui.selectors
    .tag('us-state')
    .state('editing')
    .dropdowns({
      override: {
        items: US_STATES,
        labelField: 'label',
        valueField: 'value',
        hint: 'Edit mode — choose carefully',
      },
    }),
];

Scope methods (intermediate, chainable)

Scope methods are immutable: each one returns a new chain. Combine them in any order — the engine collects all conditions and matches a widget when every condition holds.

Method	Matches
`tag(name)`	Widgets carrying `name` in their `tags` array.
`tagsAnd(['a', 'b', …])`	Widgets carrying all of the given tags.
`tagsOr(['a', 'b', …])`	Widgets carrying any of the given tags.
`state(name)`	Only fire while the named state is active. Per-state override path.

gui.selectors.tag('identity').inputs({ override: { autocomplete: 'off' } });
gui.selectors
  .tagsAnd(['compact', 'identity'])
  .textInputs({ override: { hint: 'Sign-in field' } });
gui.selectors
  .tagsOr(['danger', 'destructive'])
  .actions({ override: { icon: 'warning' } });
gui.selectors.state('submitting').actions({ override: { disabled: true } });

See Multi-value scopes and Scope operators for the full semantics, including how state(...) interacts with the <prop>.<state> suffix syntax.

Type-leaf methods (terminal)

A type-leaf names a widget kind and applies a decorator config to every matching widget. Each leaf takes a single config argument.

Inputs

The umbrella inputs(...) matches every input-kind itemType (textInputs, dropdowns, passwords, calendars, every input). The narrower leaves match only their specific kind.

Leaf method	Matches
`inputs(config)`	Umbrella — every input kind.
`textInputs(config)`	Only `gui.inputs.textInput` widgets.
`numberInputs(config)`	Only `gui.inputs.numberInput`.
`booleanInputs(config)`	Only `gui.inputs.booleanInput`.
`selects(config)`	`gui.inputs.select`.
`dropdowns(config)`	`gui.inputs.dropdown`.
`radiogroups(config)`	`gui.inputs.radiogroup`.
`checkboxes(config)`	`gui.inputs.checkbox`.
`textareas(config)`	`gui.inputs.textarea`.
`passwords(config)`	`gui.inputs.password`.
`currencies(config)`	`gui.inputs.currency`.
`markdowns(config)`	`gui.inputs.markdown`.
`lists(config)`	`gui.inputs.list`.
`calendars(config)`	`gui.inputs.calendar`.
`dateInputs(config)`	`gui.inputs.dateInput`.
`datePickers(config)`	`gui.inputs.datePicker`.
`rangeCalendars(config)`	`gui.inputs.rangeCalendar`.
`rangeDateInputs(config)`	`gui.inputs.rangeDateInput`.
`rangeDatePickers(config)`	`gui.inputs.rangeDatePicker`.
`repeaters(config)`	`gui.inputs.repeater`.
`customInputs(config)`	Every `gui.inputs.custom(...)`.

Actions, displays, layouts

Leaf method	Matches
`actions(config)`	Umbrella — every action kind (`button`, custom actions).
`displays(config)`	Umbrella — every display kind (`alert`, `display(callback)`, custom displays).
`alerts(config)`	Only `gui.displays.alert`.
`layouts(config)`	Umbrella — every layout kind (`flex`, `grid`, `tabs`, `accordion`, custom).
`tabs(config)`	Only `gui.layouts.tabs`.
`accordions(config)`	Only `gui.layouts.accordion`.
`customActions(config)`	Every `gui.actions.custom(...)`.
`customDisplays(config)`	Every `gui.displays.custom(...)`.
`customLayouts(config)`	Every `gui.layouts.custom(...)`.

Uid-leaf methods (terminal)

Each leaf has a <leaf>ByUid variant that targets a single widget by its uid. The uid argument comes first; the config second. There’s one byUid per top-level itemType — for textInput / numberInput / booleanInput (which share the INPUTS itemType) use inputByUid.

Inputs

Leaf method	Matches
`inputByUid(uid, config)`	A single input by `uid` — works for `textInput` / `numberInput` / `booleanInput`.
`selectByUid(uid, config)`	A single `gui.inputs.select`.
`dropdownByUid(uid, config)`	A single `gui.inputs.dropdown`.
`radiogroupByUid(uid, config)`	A single `gui.inputs.radiogroup`.
`checkboxByUid(uid, config)`	A single `gui.inputs.checkbox`.
`textareaByUid(uid, config)`	A single `gui.inputs.textarea`.
`passwordByUid(uid, config)`	A single `gui.inputs.password`.
`currencyByUid(uid, config)`	A single `gui.inputs.currency`.
`markdownByUid(uid, config)`	A single `gui.inputs.markdown`.
`listByUid(uid, config)`	A single `gui.inputs.list`.
`calendarByUid(uid, config)`	A single `gui.inputs.calendar`.
`dateInputByUid(uid, config)`	A single `gui.inputs.dateInput`.
`datePickerByUid(uid, config)`	A single `gui.inputs.datePicker`.
`rangeCalendarByUid(uid, config)`	A single `gui.inputs.rangeCalendar`.
`rangeDateInputByUid(uid, config)`	A single `gui.inputs.rangeDateInput`.
`rangeDatePickerByUid(uid, config)`	A single `gui.inputs.rangeDatePicker`.
`repeaterByUid(uid, config)`	A single `gui.inputs.repeater`.
`customInputByUid(uid, config)`	A single `gui.inputs.custom(...)` instance.

Actions, displays, layouts

Leaf method	Matches
`actionByUid(uid, config)`	A single action (`button`, custom).
`customActionByUid(uid, config)`	A single `gui.actions.custom(...)`.
`displayByUid(uid, config)`	A single display (any kind).
`alertByUid(uid, config)`	A single `gui.displays.alert`.
`customDisplayByUid(uid, config)`	A single `gui.displays.custom(...)`.
`layoutByUid(uid, config)`	A single layout (any kind).
`tabsByUid(uid, config)`	A single `gui.layouts.tabs`.
`accordionByUid(uid, config)`	A single `gui.layouts.accordion`.
`customLayoutByUid(uid, config)`	A single `gui.layouts.custom(...)`.

gui.selectors.inputByUid('email-field', {
  override: { hint: 'We never share this.' },
});
gui.selectors
  .tag('compact')
  .dropdownByUid('country', { override: { height: 120 } });

byUid selectors win over broader selectors in precedence.

Config shape

Every leaf’s config is a typed Gsl<Type>Config extending the same base:

interface GslConfigBase<D> {
  override?: Partial<D> | (current: D) => Partial<D>;
}

override carries either a partial decorator (most common) or a callback that receives the current decorator and returns a partial. Specific kinds add extra fields — e.g. inputs and dropdowns also expose:

interface GslInputsConfig extends GslConfigBase<InputDecorator> {
  suppressAutomaticLabels?: boolean;
  suppressAutomaticPlaceholders?: boolean;
}

These flags turn off the sensible defaults the DX layer applies to matching widgets.

gui.selectors.inputs({
  override: { autocomplete: 'off' },
  suppressAutomaticPlaceholders: true,
});

Wiring `formSelectors` on the form component

formSelectors lives inside the config object alongside formDef:

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

const formDef = [
  /* … */
];
const formSelectors = [
  gui.selectors.tag('identity').inputs({ override: { autocomplete: 'off' } }),
];
const config = { formDef, formSelectors };
// <GuiForm config={config} />

For Angular and Lit wiring, see Integration / Configuration.

gui.selectors reference

Signature

Scope methods (intermediate, chainable)

Type-leaf methods (terminal)

Inputs

Actions, displays, layouts

Uid-leaf methods (terminal)

Inputs

Actions, displays, layouts

Config shape

Wiring formSelectors on the form component

See also

Wiring `formSelectors` on the form component