Skip to content

Properties

PropertyTypeDescription
valuestring(optional) The content value of the Textarea.
alignstring(optional) Defines the text-align of the Textarea. Defaults to left.
stretchboolean(optional) If set to true, then the Textarea field will be 100% in width.
placeholderstring(optional) The placeholder which shows up once the Textarea value is empty.
keepPlaceholderboolean(optional) Use true to keep the placeholder visible even when the Textarea has focus. Defaults to false.
labelstring(optional) Prepends the Form Label component. If no ID is provided, a random ID is created.
label_directionstring(optional) Use label_direction="vertical" to change the label layout direction. Defaults to horizontal.
suffixstring(optional) Text describing the content of the Textarea more than the label. You can also send in a React component, so it gets wrapped inside the Textarea component.
label_sr_onlyboolean(optional) Use true to make the label only readable by screen readers.
autoresizeboolean(optional) Use true to make the Textarea grow and shrink depending on how many lines the user has filled.
autoresize_max_rowsnumber(optional) Set a number to define how many rows the Textarea can auto grow.
characterCounternumber
object
(optional) Use a number to define the displayed max length. You can also use an object defining the TextCounter variant or properties. Please avoid using maxLength for accessibility reasons.
sizestring(optional) The sizes you can choose for 1 row is small (2rem), medium (2.5rem) and large (3rem). Defaults to small.
statusstring
boolean
(optional) Text with a status message. The style defaults to an error message. You can use true to only get the status color, without a message.
status_statestring(optional) Defines the state of the status. Currently, there are two statuses [error, info]. Defaults to error.
status_propsobject(optional) Use an object to define additional FormStatus properties.
globalStatusobject(optional) The configuration used for the target GlobalStatus.
textarea_statestring(optional) To control the visual focus state as a prop, like focus or blur.
inner_refReact.Ref(optional) By providing a React.Ref we can get the internally used Textarea element (DOM). E.g. inner_ref={myRef} by using React.createRef() or React.useRef().
skeletonboolean(optional) If set to true, an overlaying skeleton with animation will be shown.
Spacestring
object
(optional) Spacing properties like top or bottom are supported.

Set Textarea height

You can set the height of a Textarea by both CSS styles or the rows attribute.