Configuration

All configuration properties are passed directly to the form component. This page covers the optional properties that are common across all frameworks.

Custom Validators

To create custom validators, implement functions that follow the CustomValidatorSchemaFn interface. Then pass them to the form component via the customValidators property.

import * as Core from '@golemui/core';

export const allowedNames: Core.CustomValidatorSchemaFn = (names: string[]) =>
  z.string().check(
    z.superRefine((val, ctx) => {
      if (val && names.includes(val) === false) {
        ctx.addIssue({
          code: 'custom',
          message: `Name "${val}" not in ${names.map((name) => `"${name}"`).join(', ')}`,
          input: val,
        });
      }
    }),
  );

React

import * as Core from '@golemui/core';
import { allowedNames } from './custom-validators/allowed-names';

const customValidators: Core.CustomValidatorSchemas = {
  allowedNames,
};

export function FormPage() {
  return (
    <div>
    <React.FormComponent
      (...)
      customValidators={customValidators}
    />
  </div>
  );
}

Angular

import * as Core from '@golemui/core';
import { allowedNames } from './custom-validators/allowed-names';

@Component({
  selector: 'my-form-app',
  template: `<gui-form
    (...)
    [customValidators]="customValidators">
    </gui-form>
  `,
})
class MyFormApp {
  protected customValidators: Core.CustomValidatorSchemas = {
    allowedNames,
  };
}

Lit

import * as Core from '@golemui/core';
import { allowedNames } from './custom-validators/allowed-names';

@customElement('lit-form')
export class FormElement extends LitElement {
  protected customValidators: Core.CustomValidatorSchemas = {
    allowedNames,
  };

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

Validation Timing

Control when field validation triggers with the validateOn property.

type ValidateOn =
  | 'eager'
  | 'change'
  | 'blur'
  | 'submit'
  | ('change' | 'blur' | 'submit')[];

When not set, the default behaviour is 'eager'.

Mode	Triggers when
'change'	The user changes the field value
'blur'	The user leaves the field
'submit'	A submit event is emitted (all fields are touched first)
'eager'	Any of the above happens (default)

React

<React.FormComponent
  (...)
  validateOn="change"
/>

Angular

@Component({
  template: `<gui-form (...) [validateOn]="validateOn"></gui-form>`,
})
class MyFormApp {
  protected validateOn: Core.ValidateOn = 'change';
}

Lit

render() {
  return html`
    <gui-form (...) .validateOn=${'change'}></gui-form>
  `;
}

Autocomplete

Control browser autofill behaviour with the autocomplete property on the form element. This sets the autocomplete attribute on the underlying <form> HTML element.

When not set, the attribute is omitted, leaving the default browser behaviour.

Individual input components also accept an autocomplete prop (via props) for fine-grained control using any W3C autofill token (e.g. 'given-name', 'street-address', 'off').

React

<React.FormComponent
  (...)
  autocomplete="off"
/>

Angular

<gui-form (...) [autocomplete]="'off'"></gui-form>

Lit

render() {
  return html`
    <gui-form (...) .autocomplete=${'off'}></gui-form>
  `;
}

Dependencies

Some components require external dependencies that are not bundled with GolemUI. Pass them via the dependencies property.

Markdown Parser

The Markdown and Markdown Text components need a markdown parser for live preview rendering.

React

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

const deps: Dependencies = {
  markdown: {
    parse: (md: string) => snarkdown(md),
  },
};

<GolemForm
  formDef={formDef}
  data={formData}
  dependencies={deps}
  ...
/>

Angular

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

protected deps: Dependencies = {
  markdown: {
    parse: (md: string) => snarkdown(md),
  },
};

<gui-form
  [formDef]="formDef"
  [data]="formData"
  [dependencies]="deps"
  ...
></gui-form>

Lit

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

const deps: Dependencies = {
  markdown: {
    parse: (md: string) => snarkdown(md),
  },
};

<golem-form
  .formDef=${formDef}
  .data=${formData}
  .dependencies=${deps}
  ...
></golem-form>

Tip

You can use any markdown parser that exposes a (markdown: string) => string function, such as snarkdown, marked, or micromark.

Localization

GolemUI supports i18n and RTL layouts. Pass a localization object to enable translations and automatic RTL rendering for languages like Arabic, Hebrew, and Persian.

React

<React.FormComponent
  formDef={formDef}
  data={formData}
  widgetLoaders={widgetLoaders}
  localization={localization}
/>

Angular

<gui-form
  [formDef]="formDef"
  [data]="formData"
  [customWidgetLoaders]="widgetLoaders"
  [localization]="localization"
></gui-form>

Lit

<gui-form
  .formDef=${this.formDef}
  .data=${this.formData}
  .customWidgetLoaders=${this.widgetLoaders}
  .localization=${this.localization}
></gui-form>

See the Responsive & RTL guide for full RTL setup details.