Skip to main content

​
Overview

TextComponent is a form input component that creates an <input> element for single-line text entry. It extends AbstractTextComponent<HTMLInputElement> and provides a fluent API for configuring text inputs.

​
Constructor

​
containerEl
HTMLElement
required
The parent HTML element where the text input will be created
const textComponent = new TextComponent(containerEl);

​
Properties

​
inputEl
HTMLInputElement
Direct access to the underlying HTML input element. Use this for advanced DOM manipulation.
​
disabled
boolean
Whether the component is currently disabled

​
Methods

​
setValue

Sets the current value of the text input.
​
value
string
required
The text value to set
textComponent.setValue("Hello World");
Returns: this (for method chaining)

​
getValue

Retrieves the current value of the text input. 
const currentValue = textComponent.getValue();
// Returns: string
Returns: string - The current text value

​
setPlaceholder

Sets placeholder text that appears when the input is empty.
​
placeholder
string
required
The placeholder text to display
textComponent.setPlaceholder("Enter your name...");
Returns: this (for method chaining)

​
setDisabled

Enables or disables the text input.
​
disabled
boolean
required
Whether the component should be disabled
textComponent.setDisabled(true);
Returns: this (for method chaining)

​
onChange

Registers a callback function that executes whenever the text value changes.
​
callback
(value: string) => any
required
Function to call when the value changes. Receives the new value as a parameter.
textComponent.onChange((value) => {
  console.log(`Value changed to: ${value}`);
  // Save to settings, validate, etc.
});
Returns: this (for method chaining)

​
onChanged

Internal method called when the value changes. Override this in subclasses for custom behavior. 
textComponent.onChanged();

​
then

Facilitates method chaining with a callback.
​
cb
(component: this) => any
required
Callback function that receives the component instance
textComponent.then((component) => {
  component.setValue("Initial value");
});
Returns: this (for method chaining)

​
Usage Examples

​
Basic Text Input

const setting = new Setting(containerEl)
  .setName("Username")
  .setDesc("Enter your username")
  .addText((text) => {
    text
      .setPlaceholder("username")
      .setValue(this.plugin.settings.username)
      .onChange(async (value) => {
        this.plugin.settings.username = value;
        await this.plugin.saveSettings();
      });
  });

​
Email Input with Validation

new Setting(containerEl)
  .setName("Email")
  .setDesc("Enter your email address")
  .addText((text) => {
    text
      .setPlaceholder("[email protected]")
      .setValue(this.plugin.settings.email)
      .onChange(async (value) => {
        // Simple email validation
        const isValid = value.includes("@");
        if (isValid) {
          this.plugin.settings.email = value;
          await this.plugin.saveSettings();
        }
      });
  });

​
Disabled Text Input

new Setting(containerEl)
  .setName("API Key")
  .setDesc("Your API key (read-only)")
  .addText((text) => {
    text
      .setValue(this.plugin.settings.apiKey)
      .setDisabled(true);
  });

​
Direct DOM Access

const textComponent = new TextComponent(containerEl);
textComponent.setValue("Hello");

// Access the underlying input element
textComponent.inputEl.type = "password";
textComponent.inputEl.maxLength = 50;
textComponent.inputEl.addClass("custom-class");

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us