Advice on the best way to add assistive-text to texbox components?

[Unknown]

Material design has specs for assistive text with textboxes:link|example

Does syncfusion have a advice on the best way to add this to a texbox component?

[Prince Oliver]

Hi Set Bro, 

Thank you for contacting Syncfusion support. 

Currently we have not provided support for assistive text in the textbox component. We will consider this as a feature request and will be included in any of our upcoming updates. Meanwhile we can achieve the requirement in the application using the form validator component. We need to map the error element with data-msg-containerid input attribute to get the text. Kindly refer to the following code snippet. 

 

[HTML] 

<form id="form1"> 

    <div class="form-group" style="padding-top: 11px;"> 

        <div class="e-float-input"> 

            <input type="text" id="name" name="Name" data-required-message="* Enter your name" required data-msg-containerid="nameError"> 

            <span class="e-float-line"></span> 

            <label class="e-float-text e-label-top" for="name">Name</label> 

        </div> 

        <div id="nameError"></div> 

    </div> 

</form> 

[Result] 

 

 

We have attached a sample for your reference. Please find the sample at the following location: https://stackblitz.com/edit/gcmgju-foow9t  

 

For more information about the form validator component, kindly refer to the following demo link: https://ej2.syncfusion.com/demos/#/material/form-validator/default.html  

 

Regards, 

Prince 

[Unknown]

Thanks so much. Could you show me an example with the React framework?

[Prince Oliver]

Hi Set Bro, 

Thank you for your update. 

We have attached a sample in React platform as per your requirement. Please find the sample at the following location: https://stackblitz.com/edit/react-ouxbgg-sgfyjp 

Please let us know if you require any further assistance on this. 

Regards, 

Prince