Migration from css textbox to react textbox in React Textbox component

30 Jan 20231 minute to read

From v16.3.21 version, the textbox is provided as React component to achieve the floating label textbox with minimal code. You can find the available textbox properties, methods, and events in the API reference.

The following table describes the migration from CSS textbox to React textbox component.

Normal textbox

| Rendering mode | CSS textbox | React textbox component |
| ———————–| ———————————–| ——————————————- |
| Default rendering | <div class='e-input-group'>
<input class='e-input' type='text' placeholder='Enter Value'/>
</div> | <TextBoxComponent id="default" placeholder="Enter Value" floatLabelType="Never" /> |
| Textbox with clear button | <div class='e-input-group'>
<input class='e-input' placeholder='Enter Value' required='true'>
<span class='e-clear-icon'></span>
</div>

Note: You have to write action for clear button. | <TextBoxComponent id="clear-input" placeholder="Enter Value" showClearButton={true} floatLabelType="Never" /> |
| Validation states | <div class='e-input-group e-error'>
<input class='e-input' type='text' placeholder='Enter Value' />
</div>

Note: Textbox component consists of three types of validation rules such as success, warning, and error. | <TextBoxComponent id="validation" placeholder="Enter Value" cssClass="e-error" floatLabelType="Never" /> |

Floating label textbox

| Rendering mode | CSS textbox | React textbox component |
| ———————–| ———————————–| ——————————————- |
| Default rendering | <div class='e-float-input'>
<input type='text' required />
<span class='e-float-line'></span>
<label class='e-float-text'>Enter Value</label>
</div> | <TextBoxComponent id="default" placeholder="Enter Value" floatLabelType="Auto" /> |
| Textbox with clear button | <div class='e-float-input e-input-group'>
<input type='text' required value= 'Clear Input' />
<span class='e-float-line'></span>
<label class='e-float-text'>Enter Value</label>
<span class='e-clear-icon'></span>
</div>

Note: You have to write action for clear button. | <TextBoxComponent id="clear-input" placeholder="Enter Value" showClearButton={true} floatLabelType="Auto" /> |
| Validation states | <div class='e-float-input e-error'>
<input type='text' required />
<span class='e-float-line'></span>
<label class='e-float-text'>Enter Value</label>
</div>

Note: Textbox component consists of three types of validation rules such as success, warning, and error. | <TextBoxComponent id="validation" placeholder="Enter Value" cssClass="e-error" floatLabelType="Auto" /> |