React TextBox

The TextBox component is a lightweight component that can be used to get input from users in various forms such as text, password, email, etc.

Getting started

To create a new Vite project, refer to the Vite documentation. documentation. Once that Vite project is ready to run with default settings, let’s add the React TextBox component to the project.

Installing Syncfusion® React packages

To use the TextBox component, install the @syncfusion/react-inputs package:

npm install @syncfusion/react-inputs

Adding CSS reference

The following CSS files are available in the Syncfusion® package that needs to be imported in the application.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-inputs/styles/material.css';

Adding TextBox component

To include the TextBox component in your application, import the TextBox from the @syncfusion/react-inputs package in App.tsx.

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

Add the TextBox component in application as shown in below code example.

import { TextBox } from "@syncfusion/react-inputs";
import './App.css';

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

Run the project

To run the project, use the following command:

npm run dev

The following example demonstrates the TextBox component is rendered with the given text.

Variants

The TextBox component enhances user interaction through its three distinct visual variants: Standard, Outlined and Filled.

Disabled

When the disabled attribute is set to true, the TextBox component cannot be edited or focused.

ReadOnly

When the readOnly attribute is set to true, the TextBox component cannot be edited.

Icons

The TextBox component allows for icon integration, with the ability to place icons at the start or end of the input using the prefix and suffix properties, respectively.

Sizes

The TextBox component enables you to set a more compact input by utilizing its size property.

Controlled vs Uncontrolled

This component implements both controlled and uncontrolled state management paradigms, offering developers implementation flexibility:

• Controlled: External state management via parent props ensures centralized control, predictable data flow, and improved testability in complex interfaces.

• Uncontrolled: The component autonomously manages its internal state, minimizing boilerplate and simplifying standalone implementation with few external dependencies.

Customization

Use the styled-components library to customize the TextBox component's appearance. To prevent hierarchy conflicts, add extra class names. Here are some customization examples.

Adaptive rendering

The TextBox component implements context-sensitive rendering capabilities through its native type attribute.

Color

The TextBox component offers validation indicators Success, Warning, and Error through its color property.

Float label

The floating label functionality offers three distinct behavioral modes: Never, Auto and Always.

Form support

The TextBox component integrates seamlessly with the form, as shown below.

Accessibility

The TextBox component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the TextBox component is outlined below.

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

The TextBox component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the TextBox component: