Skip to main content

Input

Input Field Component​

The Input field is the most versatile form element in React-Forminate, supporting multiple text-based input types with full validation and dynamic behavior.

Core Properties​

interface TextFieldType extends BaseField {
  type: "text" | "number" | "email" | "password" | "url" | "tel" | "search";
  placeholder?: string; // Display text when empty
  autoCorrect?: "on" | "off"; // Mobile keyboard autocorrect
  autoCapitalize?: "off" | "words" | "sentences"; // Text capitalization
  spellCheck?: boolean; // Browser spellcheck
  autoFocus?: boolean; // Autofocus on mount
  step?: number; // For number inputs (increment steps)
  // All standard HTML input attributes available
}

Basic Example​

function BasicInputExample() {
  const schema = {
    formId: "basic-inputs",
    fields: [
      {
        fieldId: "username",
        type: "text",
        label: "Username",
        placeholder: "Enter 3-20 characters",
        required: true,
        validation: [
          { minLength: 3, message: "Too short" },
          { maxLength: 20, message: "Too long" }
        ]
      }
    ]
  };
  return <DynamicForm formData={schema} />;
}

Advanced Usage​

Dynamic Label Example​

{
  fieldId: "personalEmail",
  type: "email",
  label: {
    fn: ({ values }) => 
      values.userType === "employee" 
        ? "Work Email" 
        : "Personal Email",
    dependsOn: ["userType"]
  }
}

Phone Number Validation​

{
  fieldId: "mobile",
  type: "tel",
  validation: [
    {
      pattern: "^\\+?[0-9\\s-]{6,}$",
      message: "Include country code (e.g. +1)"
    }
  ],
  inputMode: "tel" // Optimizes mobile keyboards
}

Conditional Input (Email) Field​

{
  fieldId: "recoveryEmail",
  type: "email",
  visibility: {
    dependsOn: ["enableRecovery"],
    condition: "equals",
    value: true
  },
  disabled: {
    fn: ({ values }) => values.userType === "guest",
    dependsOn: ["userType"]
  }
}

Accessibility Best Practices​

{
  fieldId: "accessibleInput",
  type: "text",
  // Required for screen readers:
  ariaLabel: "Description for screen readers",
  // Mobile optimizations:
  autoComplete: "given-name", // For names
  inputMode: "text", // Keyboard type
  autoCapitalize: "words" // Name capitalization
}

Validation Patterns​

Common Regex Patterns​

Use CasePatternExample
Email^\S+@\S+\.\S+$user@domain.com
Phone^\+?[\d\s-]{6,}$+1 234 567
Password^(?=.*[A-Z])(?=.*\d).{8,}$Passw0rd
Username^[a-z0-9_-]{3,16}$user_123

Styling Examples​

Tailwind CSS​

{
  ...
  className: "border rounded px-4 py-2 focus:ring-2 focus:ring-blue-500",
  labelClassName: "block mb-1 font-medium text-gray-700"
}

CSS Modules​

{
  ...
  className: styles.textInput,
  containerClassName: styles.inputContainer
}

Inline styles​

{
  ...
  styles: {
    border: "1px solid #ccc",
    padding: "8px",
    borderRadius: "4px",
    backgroundColor: "#fff",
  },
  labelStyles: {
        marginBottom: "8px",
  },
}

Events Handling​

In the react-forminate you need to add the custom keyword to the handling.
For example Instead of onChange use of onCustomChange.

{
  fieldId: "search",
  type: "search",
  events: {
    onCustomChange: (e) => trackSearchInput(e.target.value),
    onCustomBlur: (e) => validateSearchTerm(e.target.value),
    ...
  }
  ...
}
Clicky