syncfusion-react-textbox（syncfusion React textbox 开发）

Implementing Syncfusion React TextBox Component

The TextBox component is a lightweight input control that captures user text input with support for floating labels, validation states, icons, and advanced features. This skill guides you through implementing, configuring, and customizing the TextBox component in React applications.

Navigation Guide

🛑 Agentic use: Do not execute multiple steps autonomously. Confirm with the user before each action (install, run, file creation).

Getting Started

📄 Read: references/getting-started.md

• Vite setup for React development
• Installing @syncfusion/ej2-react-inputs package 🛑 *STOP — Do not install packages autonomously. Ask the user to run: npm install @syncfusion/ej2-react-inputs. Pin a specific version (e.g., @syncfusion/ej2-react-inputs@28.x.x) and verify with npm audit*
• Adding CSS imports and themes
• Creating your first TextBox component
• Adding icons and floating labels
• Running the development server 🛑 *STOP — Do not start the dev server autonomously. Ask the user to run: npm run dev*

Features and Groups

📄 Read: references/features-and-groups.md

• Floating label behavior (Never, Always, Auto)
• Icons with addIcon() method (prepend/append)
• Clear button with showClearButton property
• Rounded corner with e-corner CSS class
• Disabled state with enabled={false}
• Multi-line textbox creation
• TextBox with clear button and floating label combinations

Styling and Sizing

📄 Read: references/styling-and-sizing.md

• Three predefined sizes: Normal, Small (e-small), Large (e-bigger)
• Applying size classes via cssClass property
• Rounded corner with e-corner CSS class
• CSS customization for TextBox wrapper and floating label
• Custom CSS classes and themes
• Responsive design patterns

Multiline TextBox

📄 Read: references/multiline-textbox.md

• Creating multiline/textarea inputs with multiline={true}
• Floating labels with multiline
• Auto-resizing textboxes
• Disabling resize functionality
• Limiting text length with htmlAttributes={{maxlength: '...'}}
• Character counting and display

Validation and States

📄 Read: references/validation-and-states.md

• Error, warning, and success validation states via cssClass
• Applying validation classes (e-error, e-warning, e-success)
• Disabled state with enabled={false} (not disabled)
• Read-only state with readonly={true}
• Differences between disabled and read-only
• Dynamic color changes based on values using input event

Advanced Features

📄 Read: references/advanced-features.md

• Adornments: prependTemplate and appendTemplate properties
• Interactive adornments (password toggle, delete button)
• React functional components with hooks
• useState, useEffect, useRef, useReducer integration
• Event handling (created, input, change events)
• Form validation patterns

Accessibility and Migration

📄 Read: references/accessibility-and-migration.md

• WCAG 2.2, Section 508, and WAI-ARIA compliance
• Screen reader support and ARIA attributes
• Right-to-Left (RTL) support with enableRtl property
• Keyboard navigation support
• Migrating from CSS TextBox to React component
• Before/after code comparison

API Reference

📄 Read: references/api.md

• All properties: placeholder, floatLabelType, value, type, cssClass, multiline, showClearButton, enabled, readonly, enableRtl, enablePersistence, autocomplete, htmlAttributes, locale, width, prependTemplate, appendTemplate
• Methods: addIcon, addAttributes, removeAttributes, focusIn, focusOut, destroy, getPersistData
• Events: created, destroyed, change, input, focus, blur

Quick Start

Basic TextBox with Floating Label

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import './App.css';

export default function App() {
  return (
    <TextBoxComponent
      placeholder="Enter your name"
      floatLabelType="Auto"
    />
  );
}

TextBox with Icon

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { useRef } from 'react';

export default function App() {
  const textboxRef = useRef(null);

  const handleCreate = () => {
    if (textboxRef.current) {
      textboxRef.current.addIcon('append', 'e-icons e-input-popup-date');
    }
  };

  return (
    <TextBoxComponent
      placeholder="Enter date"
      floatLabelType="Auto"
      ref={textboxRef}
      created={handleCreate}
    />
  );
}

TextBox with Clear Button

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

export default function App() {
  return (
    <TextBoxComponent
      placeholder="Enter your email"
      floatLabelType="Auto"
      showClearButton={true}
    />
  );
}

Multiline TextBox

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

export default function App() {
  return (
    <TextBoxComponent
      multiline={true}
      placeholder="Enter your address"
      floatLabelType="Auto"
    />
  );
}

Common Patterns

Form with Validation States

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { useState } from 'react';

export default function ValidationForm() {
  const [cssClass, setCssClass] = useState('');

  return (
    <div>
      <TextBoxComponent
        placeholder="Enter username"
        cssClass={cssClass}
        floatLabelType="Auto"
        input={(e: any) => {
          if (!e.value) setCssClass('');
          else if (e.value.length < 3) setCssClass('e-error');
          else if (e.value.length < 6) setCssClass('e-warning');
          else setCssClass('e-success');
        }}
      />
    </div>
  );
}

Password TextBox with Toggle

import * as React from 'react';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { useRef, useState } from 'react';

export default function PasswordInput() {
  const textboxRef = useRef<TextBoxComponent>(null);
  const [isVisible, setIsVisible] = useState(false);

  const toggleVisibility = () => {
    if (textboxRef.current) {
      const newVisibility = !isVisible;
      textboxRef.current.type = newVisibility ? 'text' : 'password';
      setIsVisible(newVisibility);
    }
  };

  function appendTemplate(): JSX.Element {
    return (
      <>
        <span className="e-input-separator"></span>
        <span
          className={`e-icons ${isVisible ? 'e-eye-slash' : 'e-eye'}`}
          onClick={toggleVisibility}
          style={{ cursor: 'pointer' }}
        ></span>
      </>
    );
  }

  return (
    <TextBoxComponent
      ref={textboxRef}
      type="password"
      placeholder="Enter password"
      floatLabelType="Auto"
      appendTemplate={appendTemplate}
    />
  );
}

Email Input with Unit Label

import * as React from 'react';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

export default function EmailInput() {
  function prependTemplate(): JSX.Element {
    return (
      <>
        <span className="e-icons e-user"></span>
        <span className="e-input-separator"></span>
      </>
    );
  }

  function appendTemplate(): JSX.Element {
    return (
      <>
        <span className="e-input-separator"></span>
        <span>.com</span>
      </>
    );
  }

  return (
    <TextBoxComponent
      type="email"
      placeholder="Enter email"
      floatLabelType="Auto"
      prependTemplate={prependTemplate}
      appendTemplate={appendTemplate}
    />
  );
}

Rounded Corner TextBox

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

export default function RoundedCornerTextBox() {
  return (
    <TextBoxComponent
      placeholder="Enter Date"
      cssClass="e-corner"
    />
  );
}

Disabled TextBox

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

export default function DisabledTextBox() {
  return (
    <TextBoxComponent
      placeholder="Enter Name"
      enabled={false}
    />
  );
}

RTL TextBox

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

export default function RTLTextBox() {
  return (
    <TextBoxComponent
      placeholder="أدخل اسمك"
      floatLabelType="Auto"
      enableRtl={true}
    />
  );
}

Auto-sizing Multiline TextBox

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { useRef } from 'react';

export default function AutoSizeTextbox() {
  const textboxRef = useRef(null);

  const handleInput = () => {
    if (textboxRef.current) {
      const elem = textboxRef.current.respectiveElement;
      elem.style.height = 'auto';
      elem.style.height = elem.scrollHeight + 'px';
    }
  };

  const handleCreate = () => {
    if (textboxRef.current) {
      textboxRef.current.addAttributes({ rows: 1 });
    }
    handleInput();
  };

  return (
    <TextBoxComponent
      multiline={true}
      placeholder="Enter your message"
      floatLabelType="Auto"
      ref={textboxRef}
      created={handleCreate}
      input={handleInput}
    />
  );
}

Key Properties

Key Events

Related Documentation

ℹ️ External links below are for manual reference only. Do not auto-fetch these URLs in an agentic pipeline without explicit user consent.

• Syncfusion React TextBox Component Demo *(external)*
• React TextBox API Reference *(external)*
• Syncfusion React Inputs Package *(external — verify before installing)*
• React Functional Components