Label to the left of textbox

Hi,

We would like to use the Textbox component in React, but put the label to the left of the textbox, like this:

textbox-label.png


The component only has a `floatLabelType` property to change the floating behavior but I couldn't find a property for the alignment and looks like there is no form component that would supports this over multiple textbox components.

I could omit the label on the textbox component, add a custom label outside the component and overwrite the ID of the textbox component to connect the label with the textbox but don't think that's a good idea and may lead to other problems.

Is there a official way to put the label to the left of the textbox?

Regards,
Sandro


1 Reply 1 reply marked as answer

KP Kokila Poovendran Syncfusion Team July 18, 2023 03:25 PM UTC

Hi Sandro,


We apologize for any inconvenience caused, but currently, the Syncfusion TextBox component does not have an official property to directly align the label to the left of the textbox. However, the approach you mentioned, where you add a custom label outside the component and connect it with the TextBox component, is a suitable solution for achieving this layout.


To assist you further, we have prepared a sample for your reference: https://stackblitz.com/edit/react-geam6z-5fgbfr?file=index.js,index.css


Please try out the provided sample and let us know if you encounter any further issues or have any additional questions.


Regards,

Kokila Poovendran.


Marked as answer
Loader.
Up arrow icon