GolemUI Components

GolemUI Components are the gui-* web components behind GolemUI Forms: text fields, pickers, lists, buttons, tabs, accordions and alerts, built with Lit. They work in plain HTML and in any framework, and they don’t need the form engine.

Code of the example above

React

TextInputBasic.tsx

import { GuiTextinput } from '@golemui/gui-components/react';
import '@golemui/gui-components/index.css';

export function TextInputBasic() {
  return <GuiTextinput label="Full name" />;
}

Angular

text-input-basic.component.ts

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

@Component({
  selector: 'app-text-input-basic',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `<gui-textinput label="Full name"></gui-textinput>`,
})
export class TextInputBasicComponent {}

Vue

TextInputBasic.vue

<script setup lang="ts">
import '@golemui/gui-components/textinput';
import '@golemui/gui-components/index.css';
</script>

<template>
  <gui-textinput label="Full name"></gui-textinput>
</template>

Lit

text-input-basic.ts

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

@customElement('text-input-basic')
export class TextInputBasic extends LitElement {
  protected override createRenderRoot() {
    return this;
  }

  override render() {
    return html` <gui-textinput label="Full name"></gui-textinput> `;
  }
}

Vanilla JS

index.html

<gui-textinput label="Full name"></gui-textinput>

To add them to a project, see Installation.

What every element shares

• Native events. The elements fire standard DOM events, so you listen to them like any other. Every value element fires gui-input while the user edits and gui-change when the value is committed, with the value in event.detail.value. Every event bubbles.
• Native form participation. Give an element a name and it takes part in a <form>: it submits its value, blocks an invalid submit and resets with the form. See Native forms.
• Accessible by default. Labels, hints and errors are linked to the control, and every element works with the keyboard. See Accessibility.
• Light DOM and cascade layers. The elements render into the page, not a shadow root, and every rule sits in a golemui.* cascade layer, so your own CSS wins without fighting specificity. See Stylesheets.
• Server rendering. The elements load in Node, and they can render their content on the server in React, Next.js, Angular, Analog, Vue, Nuxt, Lit and Astro. See Server rendering.
• Strict CSP. Rendered in the browser, the elements pass a Content Security Policy of script-src 'self' and style-src 'self': no inline styles, no eval, no data: images. See Strict CSP.