Text Area

Allows the user to input longer form text.

Ways to use a Text Area

Use it with a forms

Add the Text Area to a form if you need users to provide an input that is potentially multiple lines of text.

Use its value to pre-fill fields in another component

Sometimes you may want to use the Text Area’s value in other components like buttons or forms.

Configuring your Text Area

To configure your text area, first give your component a name and placeholder text.

Next, set a default value. This step is optional but useful if you want text pre-filled in the text area. Select “Set to null” to make the default selection “Null” and “Set to UUID”  to make the default a auto-generated UUID. Otherwise, choose “Set a template”. A template allows you to enter in a value, insert a variable (i.e. bind to a value in another component in your app), or do a combination of both. 

You can also set visibility rules for your radio button if you want it to appear only if a set of conditions are met.

‍

Design

Left and Top options only appear for top-level components (components that are placed directly onto the Space canvas).

Left: Set the distance of this component from the left edge of the Space canvas (x-axis position). This can be expressed as a % of the canvas or as a number of pixels.

Top: Set the distance of this component from the top edge of the Space canvas (y-axis position). This can be expressed as a % of the canvas or as a number of pixels.

‍

Width: Set the width of this component as a number of pixels or as a % of the containing unit.

Height: Set the height of this component as a number of pixels or as a % of the containing unit.

If the component is a top-level component, the containing unit is the Space canvas.

If the component is in-line within another component, the containing unit is the parent component.

If the component is within a flexbox component, the containing unit is the flexbox.

‍

Snap to Grid: Set the edges of this component to snap to the grid canvas in the Space.