Textarea

The Textarea component allows users to enter multiple lines of text.

Adding a Textarea

To add a Textarea to your page, follow these steps:

Open the Insert Menu and navigate to Components.

Click or drag the Textarea onto your desired location on the page.

Guides

Using Textarea in Forms

Textareas work best when used within a form, so you can use built-in validation and data handling. To include a Textarea in a form, use the Textarea Field component available under Form Components.

To add a Textarea Field in a form:

Open the Insert Menu and navigate to Components.

Drag the Form component onto your page.

Remove any unneeded elements from the form.

With the form selected, open the Insert Menu again and choose the Textarea Field component within the form.

Adding a Label

Labels help users understand what information the textarea should contain.

To add a label to a textarea:

Open the Insert Menu and select the Label component.

Place the Textarea component inside the Label.

Position the Label’s Text element relative to the textarea (e.g., above it).

Use the Properties Panel to adjust the text style and spacing for clarity.

Disabling the Textarea

To prevent users from interacting with a textarea:

Select the Textarea component.

Go to the Properties Panel.

Add the disabled property and set it to true.

Customizing Colors

You can adjust the colors of the textarea to fit your design:

Select the Textarea component.

Navigate to the Properties Panel.

Modify the background and border colors to suit your design.

Adjusting Sizes

To change the size of your textarea:

Select the Textarea component.

Go to the Properties Panel.

Set the width and height to your desired dimensions.

Changing Border Radius

Control how rounded the corners of the textarea appear:

Select the Textarea component.

Go to the Properties Panel.

Adjust the border-radius as needed.

Adding Helper Text

Helper text offers additional guidance for users filling out the textarea.

To add a helper text:

Wrap the Textarea in a Column (or similar container).

Add a Text element directly beneath the textarea.

Use the Properties Panel to customize the typography and spacing of the helper text.

Properties

Property	Type	Default	Description
id	`string`	-	Unique identifier for the textarea.
defaultValue	`string`	-	The default value of the textarea when it is first rendered.
disabled	`boolean`	`false`	If `true`, prevents the user from interacting with the input.
onChange	`Action`	-	Event handler triggered when the textarea value changes.
placeholder	`string`	`‘Text’`	The placeholder text shown when the textarea is empty.

Note:

No disabled or id properties

No properties for resizing

No html attributes