RadioGroup

Import and live example#

One vertical owner choice with one disabled option.

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 element = createCatalogElement<AeliqoRadioGroupElement>("aeliqo-radio-group", root);
		element.label = "Report owner";
		element.name = "owner";
		element.options = options;
		element.value = "ada";
		element.orientation = "vertical";
	}))(root);

Purpose#

A bounded set of native radio options under one legend. The host can set value to the selected option; choosing an enabled option updates it locally and emits a typed change. Its selected value is available to form submission. Disabled options stay visible, and the host decides what to persist.

When to use it#

• People must select exactly one of a few named options.
• Every option should stay visible without opening a list.
• Some options can appear disabled without being removed.

When to use a different component#

• Use Select when the list should stay collapsed to save space.
• Use Checkbox controls when several options can be selected independently.

Properties and defaults#

Option IDs remain stable; user selection updates the local value and emits a change for the host.

Events#

Events cross the component boundary as user proposals. Validate their detail and current authority before applying a business effect.

Listen for aeliqo-input-change

const element = document.querySelector('aeliqo-radio-group');<p>element?.addEventListener('aeliqo-input-change', (event) => {
  const proposal = (event as CustomEvent<unknown>).detail;
  // Validate the proposal, update host state, then assign controlled properties.
  applyProposal(proposal);
});

Listen for aeliqo-validation

const element = document.querySelector('aeliqo-radio-group');</p>
<p>element?.addEventListener('aeliqo-validation', (event) => {
  const proposal = (event as CustomEvent<unknown>).detail;
  // Validate the proposal, update host state, then assign controlled properties.
  applyProposal(proposal);
});

States and failure handling#

Relevant states:

• ready
• disabled
• invalid
• pending

Expected result: The group exposes one selected owner and keeps the disabled option discoverable.

Changing value or replacing validator cancels validation for the previous value and clears its validator-owned error. An independently supplied host error survives the change. Late results after a reset or disconnect are ignored.

Keyboard, focus, and accessibility#

Keyboard behavior:

• Tab
• Arrow keys
• Space

Exposed semantics:

• aria-describedby
• aria-invalid
• aria-readonly
• input
• role

Responsive behavior#

Vertical orientation suits narrow forms. Let long option labels wrap without changing their stable IDs.

Style hooks#

• Shadow parts: description, error, field, input, label, option, pending
• Varendo design tokens referenced: --aeliqo-color-accent, --aeliqo-color-muted, --aeliqo-control-min-target, --aeliqo-space-4, --aeliqo-space-8, --aeliqo-typography-font-weight-semibold

Related components#

• Select
• Checkbox

Generated TypeScript declaration#

export declare class AeliqoRadioGroupElement extends AeliqoFieldElement<string> {
    static readonly properties: {
        label: {
            type: StringConstructor;
        };
        description: {
            type: StringConstructor;
        };
        error: {
            type: StringConstructor;
        };
        required: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        disabled: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        readOnly: {
            attribute: string;
            type: BooleanConstructor;
            reflect: boolean;
        };
        name: {
            type: StringConstructor;
            reflect: boolean;
        };
        autocomplete: {
            type: StringConstructor;
        };
        locale: {
            type: StringConstructor;
        };
        validationState: {
            attribute: string;
            type: StringConstructor;
            reflect: boolean;
        };
        validator: {
            attribute: boolean;
        };
        options: {
            attribute: boolean;
        };
        value: {
            type: StringConstructor;
            reflect: boolean;
        };
        defaultValue: {
            attribute: string;
            type: StringConstructor;
        };
        orientation: {
            type: StringConstructor;
        };
    };
    options: readonly AeliqoOption[];
    value: string;
    defaultValue: string;
    orientation: 'horizontal' | 'vertical';
    connectedCallback(): void;
    protected updated(): void;
    protected isCurrentValidationValue(value: string): boolean;
    protected resetField(): void;
    protected render(): import("lit").TemplateResult<1>;
    focus(options?: FocusOptions): void;
    private readonly handleChange;
    private native;
    private syncNative;
    static readonly styles: import("lit").CSSResult[];
}

Version#

This page documents the Varendo 0.6 component contract.