How to change the floating label color in React TextBox

9 Aug 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'));