HelpBot Assistant

How can I help you?

Change the floating label color of the TextBox in React

21 Feb 20262 minutes to read

Customize the floating label color for different validation states (success and warning) to provide visual feedback about input validity. Apply the following CSS rules to style the label based on the TextBox state:

/* Success state - green label */
.e-float-input.e-input-group.e-success label.e-float-text,
.e-float-input.e-input-group.e-success input:focus ~ label.e-float-text,
.e-float-input.e-input-group.e-success input:valid ~ label.e-float-text {
  color: #22b24b;
}

/* Warning state - yellow/amber label */
.e-float-input.e-input-group.e-warning label.e-float-text,
.e-float-input.e-input-group.e-warning input:focus ~ label.e-float-text,
.e-float-input.e-input-group.e-warning input:valid ~ label.e-float-text {
  color: #ffca1c;
}
import { TextBoxComponent } from "@syncfusion/ej2-react-inputs";
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class Default extends React.Component {

render() {
   return (
    <div>
        <TextBoxComponent placeholder="Success" floatLabelType="Auto" cssClass="e-success"/>

        <TextBoxComponent placeholder="Warning" floatLabelType="Auto" cssClass="e-warning"/>
    </div>
);
}
}

ReactDOM.render(<Default />, document.getElementById('input-container'));
import { TextBoxComponent } from "@syncfusion/ej2-react-inputs";
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class Default extends React.Component {

public render() {
   return (
    <div>
        <TextBoxComponent placeholder="Success" floatLabelType="Auto" cssClass="e-success"/>

        <TextBoxComponent placeholder="Warning" floatLabelType="Auto" cssClass="e-warning"/>
    </div>
);
}
}

ReactDOM.render(<Default />, document.getElementById('input-container'));