Component for enter multiline text.

The <TextArea> is a form component which allows user to enter text with a keyboard. It consists of a label, a textarea and a help text. The latter also contains error messages.

It is behaves similar to the <TextField>. The properties have the identical behavior as the ones in <TextField>.

You can also add all usual properties from the HTML textarea element.



To import the component you just have to use this code below.

import { TextArea } from '@marigold/components';


variant-The available variants of this component.
size-The available sizes of this component.


labelReactNodenoneThe label text.
descriptionReactNodenoneA helpful text.
errorMessageReactNodenoneAn error message.
errorbooleanfalseIf true, the is considered invalid and if set the errorMessage is shown instead of the description.
valuestringnoneThe value of the textarea.
disabledbooleanfalseIf true, the textarea is disabled.
requiredbooleanfalseIf true, the textarea is required.
readOnlybooleanfalseIf true, the textarea is readOnly.
onChangefunctionnoneA callback function that is called with the textarea's current value when the input value changes.
widthstring | numberfullSets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width
rowsnumbernoneSets the number of rows from the textarea.
...-Yes you can use all regular attributes of textarea!


Simple TextArea

In this example you can see how a basic <TextArea> can look like.

Disabled Textarea

If you want to build a disabled <TextArea>, you have to add the disabled property.

Required Textarea

The required property adds an required icon to the label. You can also see that the rows prop is set to 6 lines.

Error Textarea

The example shows how to set the error and errorMessage properties. If you fill the texarea correctly, it will disappear automatically.

Oh no, we have an error!