«input» Component Type

📖 Table of Contents

Introduction

The input component type is a fundamental building block for form elements in SmarkForm. It allows you to create and manage various types of input fields within your forms.

  • Imports and Exports: String
  • Singleton Pattern: Implements the Singleton Pattern
  • Data Conversion: No data conversion is performed. The value is returned as a String.

Usage

To use the input component type, simply add the data-smark attribute to your input elements. The type of input can be specified within the data-smark attribute.

Example:

🔗
🗒️ HTML
🎨 CSS
⚙️ JS
👁️ Preview
❓
<div id="myForm">
  <input type="text" data-smark='{"name":"username"}' placeholder="Enter your username">
</div>

const myForm = new SmarkForm(document.getElementById("myForm"), {
    "value": {"username":"alice"}
});

Every example in this section comes with many of the following tabs:

  • HTML: HTML source code of the example.
  • CSS: CSS applied (if any).
  • JS: JavaScript source code of the example.
  • Preview: Live, sandboxed rendering of the example — fully isolated from the page styles.
  • Notes: Additional notes and insights for better understanding. Don't miss it‼️

🛠️ Between the tab labels and the content there is always an edit toolbar:

  • ✏️ Edit — activates edit mode: each source tab turns into a syntax-highlighted code editor (powered by Ace) pre-filled with the full, merged source. Changes are sandboxed — the original example is not affected.
  • 📋 Include playground editor — (only visible in edit mode) controls whether the JSON playground editor is included in the preview. When toggled, the HTML and JS editors update instantly so you can see exactly what code is needed to add or remove it. Disabled for this example.
  • ▶️ Run — (only visible in edit mode) re-renders the Preview from the current editor contents and switches to the Preview tab.

JSON format (format option)

Adding {"format":"json"} (or the legacy alias encoding:"json") to any <input>, <textarea> or <select> makes the field round-trip real JavaScript values instead of raw text:

  • On import, an object, array, number, boolean or null is serialized to a JSON string in the field (pretty-printed in <textarea> for readability).
  • On export, the field’s text is parsed back into a JavaScript value; unparsable or empty input exports null.

In other words, the field’s DOM value is always a JSON string, but the imported/exported data is a structured value — the string never leaks into your exported JSON.

<textarea name="metadata" data-smark='{"format":"json"}'></textarea>

await myForm.import({ metadata: { subscribed: true, tier: "premium" } });
await myForm.export();
// → { "metadata": { "subscribed": true, "tier": "premium" } }

Without the option the field simply exports its raw string value (the default input behaviour).

See: JSON format for a full playable example.

API Reference

Actions

Actions are special component methods that can be triggered both programmatically (by directly calling the function) or by user interaction with a trigger component. Each action is associated with a specific behavior that can be performed on the component.

👉 Actions receive an options object as an argument, which contains the necessary information to perform the action.

👉 When called from triggers, the properties defined in their data-smark object, are passed as options to the action. Those expecting a path(★ ) to other components are resolved to the actual component.

The input component type supports the following actions:

(Async) export (Action)

Exports the value of the input field.

Options (export)
  • action: (= “export”)
  • origin: Origin is automatically set to the trigger component that called the action (and cannot be overridden). In case of a manual call, it is set to Null.
  • context: Path★ (absolute or relative to its natural context) to the component that is the context of the action. If not provided, the context is set to its natural context.
  • target: Path★ (absolute or relative to its context). Pipes the exported data to the import action of the target component.
  • data:

(Async) import (Action)

Imports a value into the input field.

Options (import)
  • action: (= “import”)
  • origin: Origin is automatically set to the trigger component that called the action (and cannot be overridden). In case of a manual call, it is set to Null.
  • context: Path★ (absolute or relative to its natural context) to the component that is the context of the action. If not provided, the context is set to its natural context.
  • target: Path★ (absolute or relative to its context). Pipes the imported data from the export action of the target component, overridding the “data” option if specified.
  • data: (any)
  • focus: (boolean, default true)

(Async) clear (Action)

Clears the value of the input field to an empty string, removing any user-provided value and ignoring any configured default value.

Options (clear)
  • action: (= “clear”)
  • origin: Origin is automatically set to the trigger component that called the action (and cannot be overridden). In case of a manual call, it is set to Null.
  • context: Path★ (absolute or relative to its natural context) to the component that is the context of the action. If not provided, the context is set to its natural context.

(Async) reset (Action)

Reverts the input field to its configured default value. If the field was initialized with a value option, reset will restore that value. If no default was configured, the field reverts to an empty string (same as clear).

Options (reset)
  • action: (= “reset”)
  • origin: Origin is automatically set to the trigger component that called the action (and cannot be overridden). In case of a manual call, it is set to Null.
  • context: Path★ (absolute or relative to its natural context) to the component that is the context of the action. If not provided, the context is set to its natural context.
Component Types
«list» Component Type
Component Types
«number» Component Type