TextBox Component

TextBox component that provides a standard text input with extended functionality. Supports both controlled and uncontrolled modes based on presence of value or defaultValue prop.

Usage

To import and use the TextBox component in your application, use the following code snippet:

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

<TextBox defaultValue="Initial text" placeholder="Enter text" />

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

<TextBox defaultValue="Initial text" placeholder="Enter text" />

Demos

Explore the demos of the React TextBox component. Refer to this page.

Props

The following table outlines the props for the TextBox component:

Name	Type	Default	Description
clearButton	node	false	Specifies whether to display a clear button within the TextBox. When enabled, a clear icon appears in the TextBox that allows users to clear the input value with a single click.
color	Color	-	Specifies the Color style of the TextBox. Options include 'Warning', 'Success' and 'Error'.
defaultValue	string	-	Specifies the default value of the component. Used for uncontrolled mode.
labelMode	LabelMode	'Never'	Specifies the floating label type for the component.
placeholder	string	-	Specifies the placeholder text for the component.
prefix	node	-	Specifies the icon to display at the beginning of the input.
size	Size	Size.Medium	Specifies the size of the component. Options include 'Small', 'Medium' and 'Large'.
suffix	node	-	Specifies the icon to display at the end of the input.
value	string	-	Specifies the value of the component. When provided, the component will be controlled.
variant	Variant	Variant.Standard	Specifies the visual style variant of the component.

Events

The following table outlines the events for the TextBox component:

Name	Type	Description
onChange	(event: TextBoxChangeEvent) => void	Specifies the Callback that fired when the input value is changed.