TextArea
The TextArea
component can be used as a multi-line plain-text editing control
to enter free-form text, such as a comment on a form.
Import
import { TextArea } from '@dynatrace/strato-components-preview/forms';
Use cases
This is the simplest version of the TextArea
, which is uncontrolled and
therefore handles its state internally. You can also set a specific initial
value using the defaultValue
prop.
Control the state
The TextArea
can also be controlled, meaning that you can handle the state. To
do so, you need to use the onChange
prop to provide a handler that is called
when the internal state of the TextArea
changes. You also need to assign the
value from the state to the TextArea
by setting the value
prop.
Disable resizing
The TextArea
component is resizable by default. However, in case you need to
disable resizing, you can set the resize
prop to none
. This doesn't change
the amount of text you can enter, but only the visual appearance. The amount of
text can be adjusted using the cols
and rows
.
Restrict resizing to one direction
The TextArea
component can be resized in both directions by default. However,
in case you need to resize in one direction only, you can set the resize
prop
to horizontal
or vertical
.
Validate
This example shows how you can validate the TextArea
using the
react-hook-form
package, which handles error messages. For connecting the form
with the TextArea
and validating, you need to register the field with custom
error messages and use the useForm
hook from react-hook-form
. Also, by using
the controlState
prop, you can override the error messages and connect the
TextArea
's error state and message to that of the form. This shows a hint in
case of an error and applies proper styling to the component. The minLength
and maxLength
can be set on the TextArea
as props, as well as when
registering the field, to restrict the message length and show custom messages
if it doesn't match.
Props
TextAreaProps
Signature:
export declare type TextAreaProps = & ( | );
TextAreaBaseProps
, , , , , ,
Name | Type | Default | Description |
---|---|---|---|
disabled? | false | Whether the textarea is disabled. If true, the user cannot interact with the control. | |
required? | false | Whether the textarea is required for form submission. If true, the user must fill in a value before submitting a form, otherwise the error styling is applied. | |
readOnly? | false | Whether the textarea is readonly. If true, the user cannot modify the value of the control. Unlike the disabled attribute, the readonly attribute does not prevent the user from clicking or selecting in the control. The value of a read-only control is still submitted with the form. | |
placeholder? | - | A hint to the user of what can be entered in the control. If set, it is shown when there is no text inside the textarea. | |
resizable? | true | This attribute indicates whether the textarea is resizable by the user. | |
resize? | | | | | 'both' | This attribute indicates whether the textarea is resizable by the user, and, if so, in which direction. |
cols? | 20 | The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. | |
rows? | 2 | The number of visible text lines for the control. If it is specified, it must be a positive integer. | |
minLength? | - | The minimum number of characters required that the user should enter. Doesn't stop the user from removing characters so that the number entered goes past the minimum, but it does make the value entered into the <textarea> invalid. With a set minlength an empty <textarea> is still considered valid unless you also have the required attribute set. | |
maxLength? | - | The maximum number of characters that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters. | |
autoComplete? | - | This attribute indicates whether the value of the control can be automatically completed by the browser. If no autocompletion is desired, it can be set to "off". | |
name? | - | The name of the control - used when submitting the textarea in a form. | |
width? | 'content' | The width of the text area. It can be set to any fixed width, can take the width of its content, or can take the full width of its container when set to 'full'. | |
'data-testid'? | 'text-area-root' | Test id used for matching the textarea container. |
TextAreaControlledProps
Name | Type | Default | Description |
---|---|---|---|
value | - | The current value of the textarea. | |
onChange | (value: , event: <>) => | - | Handler that is called when the value changes. |
TextAreaUncontrolledProps
Name | Type | Default | Description |
---|---|---|---|
defaultValue? | - | The default value of the textarea. |