Varendo

FieldGroup

Group related controls with legend, descriptions and coordinated validation.

FamilyinputLicenseApache-2.0
StandaloneAvailable

Use the web element directly without the semantic runtime.

Semantic bindingAvailable

A registered presentation adapter can bind this component to host-owned meaning and state.

Automatic adaptationNo standard recipe

The standard recipe resolver does not select this component automatically.

Import and live example

One legend and description wrapping a preferred-name field.

Interactive preview requires JavaScript.

View the complete example source
import {registerAeliqoElements} from "@varendo/web";
import {
  AeliqoCheckboxElement,
  AeliqoComboboxElement,
  AeliqoDateFieldElement,
  AeliqoDateRangeElement,
  AeliqoFieldGroupElement,
  AeliqoFileInputElement,
  AeliqoFormElement,
  AeliqoNumberFieldElement,
  AeliqoRadioGroupElement,
  AeliqoSearchFieldElement,
  AeliqoSelectElement,
  AeliqoSliderElement,
  AeliqoSwitchElement,
  AeliqoTextAreaElement,
  AeliqoTextFieldElement,
  type AeliqoOption,
} from "@varendo/web/inputs";

const options: readonly AeliqoOption[] = [
  {value: "ada", label: "Ada Lovelace", description: "Research"},
  {value: "grace", label: "Grace Hopper", description: "Product"},
  {value: "lin", label: "Lin Chen", disabled: true},
];

registerAeliqoElements();

const host = document.querySelector<HTMLElement>("#aeliqo-example") ?? (() => {
  const created = document.createElement("div");
  created.id = "aeliqo-example";
  (document.body ?? document.documentElement).append(created);
  return created;
})();

function createCatalogRoot(container: HTMLElement): HTMLElement {
  const root = document.createElement("div");
  root.dataset.catalogSourceRoot = "true";
  root.style.display = "grid";
  root.style.gap = "12px";
  container.append(root);
  return root;
}

function createCatalogElement<T extends HTMLElement>(tagName: string, container: HTMLElement): T {
  const element = document.createElement(tagName) as T;
  element.setAttribute("data-aeliqo-theme", "light");
  container.append(element);
  return element;
}

function appendSlottedText(root: HTMLElement, slot: string, textContent: string): void {
  const content = document.createElement("span");
  content.slot = slot;
  content.textContent = textContent;
  root.append(content);
}

const root = createCatalogRoot(host);
(((root) => {
		const group = createCatalogElement<AeliqoFieldGroupElement>("aeliqo-field-group", root);
		group.legend = "Profile details";
		group.description = "All fields are validated together.";
		const field = document.createElement("aeliqo-text-field") as AeliqoTextFieldElement;
		field.label = "Preferred name";
		field.name = "preferredName";
		group.append(field);
	}))(root);

Purpose

Groups related controls under one legend with shared description and error text. It can disable the whole fieldset while each child keeps its own value and validation.

When to use it

When to use a different component

Properties and defaults

The group supplies shared semantics; child controls own their values and events.

Properties, ownership, and initial values
PropertyUse and ownershipDeclared typeInitial value
legendProvides the field-group legend announced before its child controls.string''
descriptionProvides supporting text associated with the control or value.string''
errorProvides the current validation or operation error associated with the control.string''
disabledPrevents user interaction while keeping the control and its current value visible.booleanfalse

Events

States and failure handling

Relevant states:

Expected result: The grouped field exposes one coherent legend and preserves child control semantics.

Keyboard, focus, and accessibility

Keyboard behavior:

Exposed semantics:

Responsive behavior

Allow child controls to stack under the legend. Keep the legend and description visible above those controls.

Style hooks

Generated TypeScript declaration

View generated declaration
export declare class AeliqoFieldGroupElement extends AeliqoFoundationElement {
    static readonly properties: {
        legend: {
            type: StringConstructor;
        };
        description: {
            type: StringConstructor;
        };
        error: {
            type: StringConstructor;
        };
        disabled: {
            type: BooleanConstructor;
            reflect: boolean;
        };
    };
    legend: string;
    description: string;
    error: string;
    disabled: boolean;
    private readonly restoredDisabled;
    private disabledObserver;
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected updated(changed: Map<PropertyKey, unknown>): void;
    protected render(): import("lit").TemplateResult<1>;
    private describedByIds;
    private readonly handleSlotChange;
    private syncDisabledDescendants;
    static readonly styles: import("lit").CSSResult[];
}

Version

This page documents the Varendo 0.6 component contract.