Skip to main content
DOMInput generates HTML form control elements as strings: <input>, <textarea>, <select>, <option>, and <optgroup>. Unlike most DOM helper classes, DOMInput is configured at construction time — the id, style options, and extra props you pass to the constructor apply to every element created from that instance.

​
Import

import { DOMInput } from "@anikitenko/fdo-sdk";

​
Constructor

new DOMInput(
  id: string,
  styleOptions?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  props?: Record<string, any>
)
​
id
string
required
The id attribute applied to the generated element. Pass an empty string "" for elements that should not have a specific id (e.g., individual option elements).
​
styleOptions
object
Style options — classes, style, disableDefaultClass. Applied to every element created from this instance.
​
props
object
Extra HTML attributes merged into every element, such as placeholder, required, disabled, name, or aria-label.
DOMInput extends DOM with selfCloseTag = true, so createInput() produces self-closing <input /> elements. createSelect(), createOption(), and createOptgroup() handle their own closing tags explicitly.

​
Methods

​
createInput

Creates a self-closing <input /> element. 
createInput(type: string): string
​
type
string
required
The HTML input type: "text", "password", "email", "number", "checkbox", "radio", etc.
const input = new DOMInput("username-input", {
  style: {
    padding: "8px",
    border: "1px solid #ccc",
    borderRadius: "4px",
    width: "280px",
  },
});

const textInput = input.createInput("text");
const passwordInput = new DOMInput("pass-input", {}, { placeholder: "Password" }).createInput("password");

​
createTextarea

Creates a <textarea> element. All style and prop configuration comes from the constructor. 
createTextarea(): string

const textarea = new DOMInput("notes-area", {
  style: { width: "100%", minHeight: "120px", padding: "8px" },
}, {
  placeholder: "Enter notes here...",
  rows: "5",
}).createTextarea();

​
createSelect

Creates a <select> dropdown element with its child <option> and <optgroup> elements. Optionally accepts a change handler. 
createSelect(
  children: any[],
  onChange?: Function
): string
​
children
any[]
required
The option or optgroup elements — output of createOption() or createOptgroup().
​
onChange
Function
An optional change event handler serialized and attached as onChange. Runs in the plugin iframe context — you can access document from within it.
const selectInstance = new DOMInput("env-select", {});

const opt1 = new DOMInput("", {}).createOption("Production", "prod");
const opt2 = new DOMInput("", {}).createOption("Staging",    "staging");
const opt3 = new DOMInput("", {}).createOption("Dev",        "dev", true); // pre-selected

const select = selectInstance.createSelect([opt1, opt2, opt3], () => {
  const el = document.getElementById("env-select") as HTMLSelectElement;
  const label = document.getElementById("env-label");
  if (el && label) {
    label.textContent = `Selected: ${el.value}`;
  }
});

​
createOption

Creates an <option> element for use inside a <select>. 
createOption(
  label: string,
  value: string,
  selected?: boolean,
  otherProps?: Record<string, any>
): string
​
label
string
required
The visible text shown in the dropdown.
​
value
string
required
The value submitted when this option is selected.
​
selected
boolean
Whether this option is pre-selected. Defaults to false.
​
otherProps
object
Additional HTML attributes, such as disabled.
// Placeholder option (pre-selected, no value)
new DOMInput("", {}).createOption("Select an option...", "", true);

// Regular options
new DOMInput("", {}).createOption("Option A", "a");
new DOMInput("", {}).createOption("Option B", "b");

​
createOptgroup

Creates an <optgroup> element that groups related options under a label. 
createOptgroup(
  label: string,
  children: any[],
  otherProps?: Record<string, any>
): string
​
label
string
required
The group heading shown in the dropdown (rendered as the label attribute).
​
children
any[]
required
option elements created with createOption().
​
otherProps
object
Additional HTML attributes, such as disabled.

​
Grouped select example

import { DOMInput } from "@anikitenko/fdo-sdk";

const groupOpt1 = new DOMInput("", {}).createOption("Item 1", "1");
const groupOpt2 = new DOMInput("", {}).createOption("Item 2", "2");
const optgroup1 = new DOMInput("", {}).createOptgroup("Group 1", [groupOpt1, groupOpt2]);

const groupOpt3 = new DOMInput("", {}).createOption("Item 3", "3");
const groupOpt4 = new DOMInput("", {}).createOption("Item 4", "4");
const optgroup2 = new DOMInput("", {}).createOptgroup("Group 2", [groupOpt3, groupOpt4]);

const groupedSelect = new DOMInput("grouped-select", {}).createSelect([optgroup1, optgroup2]);

​
Full form example

import { DOMInput, DOMText, DOMNested, DOMButton } from "@anikitenko/fdo-sdk";

const text   = new DOMText();
const nested = new DOMNested();
const button = new DOMButton();
const input  = new DOMInput("username-input", {
  style: { padding: "8px", border: "1px solid #ccc", borderRadius: "4px", width: "280px" },
});

const form = nested.createForm(
  [
    text.createLabelText("Operator name", "username-input", {
      style: { display: "block", marginBottom: "6px", fontWeight: "600" },
    }),
    input.createInput("text"),
    nested.createBlockDiv(
      [
        button.createButton(
          "Register Session",
          () => {},
          { style: { marginTop: "12px", padding: "8px 12px" } },
          "register-session-button"
        ),
      ],
      { style: { marginTop: "8px" } }
    ),
  ],
  {
    customAttributes: { onsubmit: "event.preventDefault();" },
    style: { padding: "12px", border: "1px solid #d9e2ef", borderRadius: "6px" },
  }
);
Use a separate DOMInput instance per distinct form control, with a unique id. Share a single reusable DOMInput("", {}) instance for generating option and optgroup elements that don’t need individual ids.