textInput

Create single-line text input fields for collecting short text responses

Overview

The textInput method creates a text input field for collecting single-line text responses. It provides validation options, placeholders, and customization parameters.

Method Signature

textInput(
  name: string,
  params: FormFieldSharedParamsType & TextInputParamsType
): string

Parameters

name · string · required

The unique identifier for this input field. Used to reference the value in form submissions and logic conditions.

Required Parameters

question · string · required

The main question or label displayed to the user.

Input-Specific Parameters

placeholder · string

Sets the placeholder attribute of the input.

placeholder: "Enter your full name"

multiline · boolean

When set to true, the input accepts values with multiple lines using the <textarea> element. See textareaInput for multiline usage.

multiline: true

maxlength · number

Sets the maximum number of allowed characters in the input.

maxlength: 100

pattern · string

Regular expression pattern that the input value must match for validation.

pattern: "^[A-Za-z\\s]+$"

value · string

Sets the default value of the input.

value: "John Doe"

Shared Parameters

required · boolean

When set to true, the field becomes required and the user must provide a value before proceeding.

description · string

Additional information displayed below the question to help users fill out the form.

fieldSize · 'sm'

When set to "sm", the font sizes of the question, description, and answer are made smaller.

labelStyle · 'classic'

When set to "classic", the question and description of the form field are made smaller.

subfield · boolean

When set to true, the question and description of the form field are made smaller (for nested fields).

disabled · boolean

When set to true, the input is disabled and cannot be edited.

autofocus · boolean

When set to true, the input will be automatically focused when the parent slide becomes active or immediately after page load.

id · string

The id attribute of the form field element.

classNames · string[]

Array of CSS class names to apply to the form field.

attrs · HTMLAttributeType[]

Array of custom HTML attributes to apply to the form field. Each attribute has a name and value property.

displayCondition · DisplayConditionType

Conditional logic to control when this field is displayed.

Show properties

dependencies · string[] · required

Array of field names or data that this condition depends on.

condition · string · required

JavaScript expression that must evaluate to true for the field to be displayed.

Examples

Basic

const composer = new Composer({ title: "Contact Form" });

composer.textInput("name", {
  question: "What is your name?",
  required: true,
  placeholder: "Enter your full name"
});

Return Value

Returns a string containing the Forms.md markup for the text input field.

Related Methods

textareaInput

Multiline text input using textarea element

emailInput

Email input with built-in validation

numberInput

Numeric input with constraints

passwordInput

Password input with masked characters