«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:

<!-- Example of text input field -->
<input type="text" data-smark='{"name":"username"}' placeholder="Enter your username">

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