The TextArea component has only one required property - label. You can use other props to complement its behavior, such as placeholder, secondaryLabel, onChange, and so on.
<TextInput label="Text area component" placeholder="Write something here" secondaryLabel="Free text element" />
The tooltip property makes the TextArea component display the tooltip icon and, when the user interacts with it, display some complementary information. This property can simply receive the text to be displayed {text: "this will be displayed when tooltip is opened"}. You can also control what specific action makes the tooltip appear by passing a second attribute trigger. It accepts the standard HTML events such as pointerover, focus, or blur. By default, the tooltip opens when the user clicks on the tooltip icon.
In this example, the tooltip is displayed when the mouse pointer is over the tooltip icon:
The TextArea component does not provide a specific validation logic but it provides a way to include the developer validation and use the stateMessages property to display any required error messages.
This is an example of handling validation when onChange event is triggered.
exportfunctionTextAreaValidation(){ const[validationMessages, setValidationMessages]=useState({}); const onChange =useCallback((e, newValue)=>{ if(!newValue || newValue.indexOf('a')==-1){ setValidationMessages({}); }else{ setValidationMessages({ error:['The text cannot contain the character `a`'], }); } },[]); return( <TextArea label="Do not accept words containing the 'a' character" secondaryLabel="Raises an error if the input contains the character 'a'" stateMessages={validationMessages} onChange={onChange} /> ); }
You can use the value property for the controlled component scenario:
exportfunctionTextAreaControlled(){ const[updatedValue, setNewValue]=useState('first given value'); constonChange=(e, newValue)=>{ setNewValue(newValue); }; return( <div> <TextArea label="Enter the value to be assigned to the input below" onChange={onChange} /> <br/> <TextArea label="Changes with the above" secondaryLabel="This value is automatically updated when the value above changes" value={updatedValue} /> </div> ); }
TextArea and other inputs allow using a ref property to access some native behaviors. However, only certain features are exposed. In this example, when you click the button, the focus will automatically be set in the input below:
exportfunctionTextAreaRef(){ const textAreaRef =useRef(null); constsetFocus=(e)=>{ textAreaRef?.current?.focus(); }; return( <div> <Button label="Set focus on TextArea" onClick={setFocus}></Button> <TextArea label="Get the focus from the button" ref={textAreaRef} /> </div> ); }
Note: There are deprecated versions of this component. Switch to a version of the docs older than 10.0.x to view their docs.
Text area is an input field that enables users to enter long-form text that spans multiple lines. Common use cases include entering detailed descriptions within forms and providing user comments.
Use help text to provide guidance about what to input and how. Here are some examples of what you might include in help text:
Context to aid the user, such as how the information will be used
Hints for what kind of information goes inside the input field
Formatting examples or requirements
Only use help text for pertinent information. Avoid using help text that simply restates the same information that appears in the label.
Use sentence case for help text. Write the help text as 1-2 short, complete sentences that end with a period. When showing formatting examples, you don't need to end with a period.
Do use help text to provide additional aid or context to the user.
Don't use help text to simply restate the same information that appears in the label.
Don't put placeholder text in the text entry field. Placeholder text strains users' short-term memory because it disappears once a value is entered. It also poses additional burdens for users with visual and cognitive impairments.
Instead, place hints and instructions, including formatting examples and requirements, outside of the field.
Error message text tells a user how to fix the error. In the case of the text area field, errors are often related to something that must be fixed for in-line validation. For example, if the user doesn't fill out a required field that asks for a description of their loss, you can use error text to guide them to a solution: “Enter a description of the loss.”
Use sentence case for error text. Write 1-2 short, complete sentences that end with a period.
Do use error text to guide the user and show them a solution.
Don't write ambiguous error messages or leave users guessing as to how to resolve a problem.
Use an asterisk (*) to indicate required fields. The asterisk precedes the field label. This helps users to easily locate which fields are required by scanning just the left-most character of the label.
In addition to marking required fields with an asterisk, it is recommended to include clear instructions at the top of the form, such as "All fields marked with an asterisk are mandatory," to ensure users understand the meaning of the asterisk.
Do use an asterisk to indicate that a field is required.
Don't use an asterisk to denote anything that is optional.
The text area component appears with no value (default), placeholder text, or a filled input.
Visual
State
Description
No value (default)
Indicates to the user that no value has been entered and there is no placeholder.
Placeholder
Indicates to the user that no value has been entered. The placeholder is grayed out.
Filled input
Indicates to the user that the input is filled with data.
Text areas also have interactive states for enabled, focus, disabled, error, read-only, and display-only.
State
Description
Enabled
Indicates to the user that the element is enabled for interaction.
Focus
Indicates to the user which UI element in the system is focused.
Disabled
Indicates to the user that the input value can't be changed because of local factors. For example, a checkbox above the input field must be checked to access this input field. The user can take action to enable it by interacting with the page.
Error
Indicates that the user has made a validation error. Error text provides corrective feedback to users.
Read-only
Indicates to the user that the input value can't be changed because of outside factors. For example, lack of write access. The user can take action to enable it by, for example, contacting an administrator.
Display-only
The display-only state is used for two cases:
A UI element is used in display mode.
A UI element is displayed in edit mode, but is never editable.
Users can manipulate the width and height of the text area using the resize handle in the bottom right of the field. If the content exceeds the visible space, a vertical scroll is enabled.
The contrast ratio of textual elements against their background is above 4.5:1 as per WCAG 2.1 AA requirements. Non-textual content that needs to convey meaning (such as icons and keyboard focus visibility) has a contrast ratio of at least 3:1 with its adjacent colors. All content is visible and functional up to and including 400% without requiring scrolling in two dimensions.
This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. However, changes made by the content author can affect accessibility conformance.
When using this component within your application, ensure that labels and instructions are meaningful and concise. Provide supplemental instructions if necessary.
Note: There are deprecated versions of this component. Switch to a version of the docs older than 10.0.x to view their docs.
Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.
If set to true, displays the component value in plain text. Consider using readonly instead, if possible, because plain text is worse for accessibility than readonly inputs.
Value of input. Takes precedence over initialValue. If this prop is passed, component works in controlled mode and its value will change only if this prop changes.
You can use HTML input attributes, except for those which are overridden by Jutro. These attributes will be assigned to the HTML input element.
<TextArea label="Text area component" id="textID1" rows={10} />
The result of passing these id and rows properties is that they will be part of the HTML input that is created in the HTML DOM. In the case of rows, it will make the text area element have 10 visible rows.
Jutro inputs have implemented imperative handlers as a mechanism to provide access to some common native features that might be useful for you. The following features are available:
Set focus to allow you to set the user focus into a specific component
Blur to remove the focus from the component
Scroll to the component so that you can take the user to a specific area of the page.
These features are provided through the ref property, which exposes them as follows:
When maxLength is provided, the TextArea component will not allow entering more characters than the value set. However, if the value is set programmatically using the initialValue or value properties, this control is not applied, so in this scenario you might need to implement specific validation to prevent undesired values.
By default the TextArea component is resized automatically to fit all its content (auto resizing). If the user resizes the component manually, the default behavior is disabled and the component will remain with the width and height the user has set.
Although some Jutro components might provide complementary features or a helper function to facilitate the validation process, it is your responsibility as a developer to handle the validation of any user input (using or not using the complementary helpers) and to decide what error messages to show.
Jutro components behave based on the developer implementation.
When are error messages displayed?
Error messages are only displayed when you pass them to the component through the stateMessages property. This property receives an object with the following content:
The component displays every error message provided in the same order as in the array.
When does validation occur?
This is your decision as a developer. As components do not determine when the validation is performed or when the error must be displayed, you need to implement the logic to handle it according to the project requirements, for example while the user is editing the content, when the component loses focus, and on form submission.
New @jutro/components/TextArea component introduced that replaces TextAreaField.
The previous TextAreaField component was deprecated and moved to the @jutro/legacy package. To view its documentation, switch to a version of the documentation older than 10.0.
