Skip to content
{gui.}

Type selectors

Type selectors are the leaf methods of the selector chain — they match every widget of a given type and apply a decorator config.

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


gui.selectors.inputs({ suppressAutomaticLabels: true }); // every input
gui.selectors.dropdowns({ height: 300 }); // every dropdown
gui.selectors.dateInputs({ dayFormat: '2-digit' }); // every dateInput
gui.selectors.actions({ disabled: false }); // every action

The leaf method names mirror the gui.<group>.* shortcuts — gui.inputs.textInput corresponds to gui.selectors.textInputs, and so on.

A type selector in action

Section titled “A type selector in action”

A small profile form with a mix of input kinds. One selector targets only the dropdowns — both of them — without touching the textInput or dateInput:

const formDef = [
  gui.inputs.textInput('name', { label: 'Full name' }),
  gui.inputs.dropdown('country', {
    label: 'Country',
    items: COUNTRIES,
    labelField: 'label',
    valueField: 'value',
  }),
  gui.inputs.dropdown('currency', {
    label: 'Preferred currency',
    items: CURRENCIES,
    labelField: 'label',
    valueField: 'value',
  }),
  gui.inputs.dateInput('dob', { label: 'Date of birth' }),
];


const formSelectors = [
  gui.selectors.dropdowns({
    override: { hint: 'Type to search', height: 120 },
  }),
];

Both dropdowns share the same hint and the same shorter popup height. The textInput and dateInput stay at their defaults — one rule, two widgets decorated, other kinds untouched.

Targeting a single widget

Section titled “Targeting a single widget”

Each leaf has a <type>ByUid variant that targets a specific widget. By-uid selectors are also higher-priority than broad type selectors, so they’re the natural way to override a widget that would otherwise be caught by a wider rule.

const formDef = [
  gui.inputs.textInput('username', { label: 'Username' }),
  gui.inputs.textInput('displayName', {
    label: 'Display name',
    uid: 'display-name',
  }),
  gui.inputs.textInput('email', { label: 'Email' }),
  gui.inputs.dateInput('dob', { label: 'Date of birth' }),
  gui.inputs.dropdown('country', {
    label: 'Country',
    items: COUNTRIES,
    labelField: 'label',
    valueField: 'value',
    height: 120,
  }),
];


const formSelectors = [
  // Broad rule — adds "✱ Required" to every input.
  gui.selectors.inputs({
    override: { hint: '✱ Required' },
  }),
  // ByUid override — replaces the broad hint on the displayName field only.
  gui.selectors.inputByUid('display-name', {
    override: { hint: 'Optional — shown publicly' },
  }),
];

Every field shows ”✱ Required” except Display name, which carries the byUid override “Optional — shown publicly”. The same widget pattern previews precedence: byUid selectors win over the broader umbrella.

See also

Section titled “See also”