How to use a multiline text area in React
React is a Javascript library used to build component-based user interfaces. React provides built-in components that allow easier, swifter, and more structured integration of functionalities in the web application. Some of the built-in components are dedicated to taking input from the user. The multiline textarea component primarily serves its functionalities as an input component. As the name implies, it spans multiple lines, which helps to get larger textual input from the user.
But, why do we need multiline text areas? We may have visited websites where the website owner wants to get detailed feedback from us. They might provide a feedback form with an input box that takes a height of 4 to 5 lines. This particular input box is an example of a multiline text area.
As evident from the image above, the multiline textarea makes it easier to input long textual data and increases readability for the user.
Syntax
<textarearows = {2} // Specifies the number of visible text linescols = {150} // Specifies the width of the textarea in charactersvalue = "Hello World" // Specifies the initial value of the textareaplaceholder = "Add your text" // Specifies a short hint that describes the expected value of the textareawrap = "soft" // Specifies how the text in the textarea should be wrappedreadOnly = {true} // Specifies that the textarea is read-only, meaning the user cannot modify its contentname = "name" // Specifies the name of the textarea, which can be used when submitting a formdisabled = {true} // Specifies that the textarea is disabled, meaning the user cannot interact with itminLength = {150} // Specifies the minimum number of characters required in the textareamaxLength = {200} // Specifies the maximum number of characters allowed in the textarea/>
The code above block shows the syntax of textarea in React JS. We will explain each attribute associated with the textarea below:
rows: An integer value that tells the number of lines thetextareaspans to.cols: An integer value that defines the width of thetextarea.value: A string that inserts the text of atextarea.placeholder: It is a string that helps users by telling them what to enter in thetextarea.wrap: A string value withoff,hard, andsoftas the possible values. Ifwraphas a value of off, then the text area's content will overflow horizontally.readOnly: A boolean value. If the value istrue, then thetextareabecomes noneditable, but the user's interactivity remains in contact.name: A string value that gets submitted along with the form's submission.minLength: An integer value that tells the minimum number of characters that should be in thetextarea.maxLength: An integer value that tells the maximum number of characters thetextareacan accommodate.
Coding examples
After understanding the syntax, let’s explore different use cases where we can use multiline text areas:
textareawithplaceholderattributetextareawithwrapattributetextareawithreadonlyattributetextareawithdisabledattributetextareawithmaxLengthattribute
textarea with placeholder attribute
Click the 'run' button below to view the placeholder in the textarea:
The code explanation is given below:
Lines 6–10: We define the
textareacomponent with 5rowsand 35cols. Theplaceholderat line 8 represents the value displayed if no text is present in thetextarea. In our example, theplaceholdervalue is set toAdd your feedback.
textarea with wrap attribute
Click the 'run' button below to view how the wrap works in the textarea:
The code explanation is given below:
Line 6–11: We define the
textareacomponent withwrapvalueoffwhich overflows the text horizontally.
textarea with readonly attribute
Click the 'run' button below to see how readOnly works in the textarea:
The explanation for the code above is given below:
Line 5–10: We define the
textareacomponent and set thereadOnlyproperty totrue, which makes thetextareacomponent non-editable but interactable.
textarea with disabled attribute
Click the 'run' button below to view how disabled works in the textarea:
The explanation for the above code is given below:
Line 6–11: We define the
textareacomponent and set thedisabledproperty to true, which turns thetextareacomponent into a non-editable, non-interactable, and greyed-out input field.
textarea with maxLength attribute
Click the 'run' button below to view how maxLength works in the textarea:
The explanation for the code above is given below:
Line 6–11: We define the
textareacomponent and set themaxLengthproperty to 25, which limits the user to enter no more than 25 characters in thetextarea.
Conclusion
We use textarea when we require large textual information from a user. It makes the website user-friendly as we allow users to view their text in multiple lines rather than displaying it in a single-line input box, compromising readability.
Free Resources