React TextBox – Advanced Text Input with Floating Labels

Overview

The React TextBox (text field) is a component for editing, displaying, or entering plain text on forms to capture user names, phone numbers, email addresses, and more. This component is an extension of the HTML5 TextBox (input type text) component with icons, floating labels, sizing, grouping, validation states, and more.

React TextBox code example

Get started with the React TextBox using a few simple lines of TSX code as demonstrated below. Also, explore the React TextBox example that shows how to render and configure the TextBox in React.

import { TextBox } from "@syncfusion/react-inputs";

export default function App() {
    return (
        <div className="component-section">
            <TextBox placeholder="Enter your name" width={250} labelMode="Auto"/>
        </div>
    );
};

Controlled mode

The React TextBox component supports both controlled and uncontrolled modes, offering flexibility in managing its state. This dual-mode capability allows integration into a wide range of application architectures, accommodating different state management strategies.

• TextArea controlled mode

Input sizing

The React TextBox component offers built-in size customization, supporting both normal and small modes. This ensures the input field maintains optimal padding and spacing for a clean and user-friendly interface.

• Input sizing documentation

Input validation with HTML forms

The React TextBox component can validate the input value and apply the corresponding validation styles for success, error, and warning states, which are used in most standard HTML forms.

• Input validation styles example

Right-to-left (RTL) rendering

The TextBox component supports right-to-left (RTL) rendering. Users can change the text direction and layout of the component from right to left. This improves the user experience and accessibility for users who use RTL languages.

Developer-friendly APIs

Developers can control the appearance and behaviors of the React TextBox component, including its floating label, using a rich set of APIs.

• TextBox API reference