Errors

<gui-errors> is the error list of a GolemUI Components field as an element of its own, styled like every other field’s errors. Use it under a control you build yourself, together with a gui-label. The fields render their own errors, so you rarely need it next to them.

Code of the example above

React

PartsCustomField.tsx

import { useState } from 'react';
import { GuiErrors, GuiLabel } from '@golemui/gui-components/react';
import '@golemui/gui-components/index.css';

const errors = ['Pick a darker color for enough contrast.'];

export function PartsCustomField() {
  const [input, setInput] = useState<HTMLInputElement | null>(null);

  return (
    <div className="gui-field">
      {/* The label sets the input's ARIA attributes: describedby, invalid, required. */}
      <GuiLabel
        uid="brand-color"
        label="Brand color"
        hint="Used for buttons and links."
        required
        targetElement={input ?? undefined}
        errors={errors}
      />
      <div className="gui-widget">
        <input
          ref={setInput}
          id="brand-color"
          type="color"
          defaultValue="#b5531f"
        />
      </div>
      <GuiErrors uid="brand-color" errors={errors} />
    </div>
  );
}

Angular

parts-custom-field.component.ts

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@golemui/gui-components/errors';
import '@golemui/gui-components/label';

@Component({
  selector: 'app-parts-custom-field',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <div class="gui-field">
      <!-- The label sets the input's ARIA attributes: describedby, invalid, required. -->
      <gui-label
        uid="brand-color"
        label="Brand color"
        hint="Used for buttons and links."
        required
        [targetElement]="input"
        [errors]="errors"
      ></gui-label>
      <div class="gui-widget">
        <input #input id="brand-color" type="color" value="#b5531f" />
      </div>
      <gui-errors uid="brand-color" [errors]="errors"></gui-errors>
    </div>
  `,
})
export class PartsCustomFieldComponent {
  errors = ['Pick a darker color for enough contrast.'];
}

Vue

PartsCustomField.vue

<script setup lang="ts">
import { useTemplateRef } from 'vue';
import '@golemui/gui-components/errors';
import '@golemui/gui-components/label';
import '@golemui/gui-components/index.css';

const input = useTemplateRef<HTMLInputElement>('input');
const errors = ['Pick a darker color for enough contrast.'];
</script>

<template>
  <div class="gui-field">
    <!-- The label sets the input's ARIA attributes: describedby, invalid, required. -->
    <gui-label
      uid="brand-color"
      label="Brand color"
      hint="Used for buttons and links."
      :required="true"
      :targetElement="input ?? undefined"
      :errors.prop="errors"
    ></gui-label>
    <div class="gui-widget">
      <input id="brand-color" ref="input" type="color" value="#b5531f" />
    </div>
    <gui-errors uid="brand-color" :errors.prop="errors"></gui-errors>
  </div>
</template>

Lit

parts-custom-field.ts

import { LitElement, html } from 'lit';
import { customElement, query } from 'lit/decorators.js';
import type { GuiLabel } from '@golemui/gui-components';
import '@golemui/gui-components/errors';
import '@golemui/gui-components/label';
import '@golemui/gui-components/index.css';

const errors = ['Pick a darker color for enough contrast.'];

@customElement('parts-custom-field')
export class PartsCustomField extends LitElement {
  @query('gui-label[uid="brand-color"]') private label!: GuiLabel;
  @query('#brand-color') private input!: HTMLInputElement;

  protected override createRenderRoot() {
    return this;
  }

  protected override firstUpdated() {
    // The label sets the input's ARIA attributes: describedby, invalid,
    // required.
    this.label.targetElement = this.input;
  }

  override render() {
    return html`
      <div class="gui-field">
        <gui-label
          uid="brand-color"
          label="Brand color"
          hint="Used for buttons and links."
          required
          .errors=${errors}
        ></gui-label>
        <div class="gui-widget">
          <input id="brand-color" type="color" value="#b5531f" />
        </div>
        <gui-errors uid="brand-color" .errors=${errors}></gui-errors>
      </div>
    `;
  }
}

Vanilla JS

index.html

<div class="gui-field">
  <gui-label uid="brand-color" label="Brand color" hint="Used for buttons and links." required></gui-label>
  <div class="gui-widget">
    <input id="brand-color" type="color" value="#b5531f" />
  </div>
  <gui-errors uid="brand-color" errors='["Pick a darker color for enough contrast."]'></gui-errors>
</div>

<script type="module">
  // The label sets the input's ARIA attributes: describedby, invalid, required.
  const label = document.querySelector('gui-label[uid="brand-color"]');
  label.targetElement = document.querySelector('#brand-color');
  label.errors = ['Pick a darker color for enough contrast.'];
</script>

Usage

import '@golemui/gui-components/errors';

Give it the same uid as your control’s id. Its container gets the id <uid>_errors, which a gui-label pointed at the control links with aria-errormessage.

Set errors to a list of messages: as an attribute, a JSON array. An empty list clears them. touched holds the errors back while it is false; leave it unset to show them as soon as you set them. panel styles the list for a popup instead of under a field.

API

Properties

Property	Type	Default	Description
errors	string[]	[]	The error messages.
touched	boolean	–	Whether the control was touched: errors wait for it unless unset.
panel	boolean	false	Renders the errors inside a popup panel instead of under a field.
uid	string	–	The id of the element's control. The ids of its label, hint and errors derive from it. Optional: when it is not set, the element generates one from its tag name and a page-wide counter, e.g. gui-textinput-3. Generated ids depend on creation order, so a server-rendered element must set uid or its ids will not match after hydration.

Accessibility

The container is always in the page, with the alert role, so screen readers announce each new error as it appears.

Styling

Class	Part
gui-validator	The errors container. It is always there, so the alert role announces new errors.
gui-validator__error	One error message.