# Text and Textarea

#### 📝 Text vs. Textarea: What's the Difference?

Both **Text** and **Textarea** fields serve similar purposes — allowing users to input custom content. However, the **Textarea** is designed for **larger inputs**, offering **more space** and **greater flexibility** in layout.

***

#### ⚙️ Basic Settings Available for Both Fields

You can customize the following features for both **Text** and **Textarea** elements:

* **Label/Name** – Change the display name shown to customers.
* **Required Field** – Make the field mandatory before form submission.
* **Add-on Price** – Add an extra cost when a customer fills out this field.
* **Min/Max Characters** – Set minimum and/or maximum allowed characters.
* **Placeholder/Help Text** – Display guidance text inside the field before entry.
* **Default Value** – Pre-fill the field with a default value.
* **Character Count** – Show a live character counter to users.
* **Conditional Logic** – Show/hide this field based on other option selections.

<figure><img src="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FCAzHbO0O0FOu9sTA4EVK%2FMonosnap%20%5BDemo%5D%20-%20Globo%20Product%20Options%20%C2%B7%20Globo%20Product%20Option%20%C2%B7%20Shopify%202025-04-15%2017-16-10.png?alt=media&#x26;token=f9ecd144-9ac6-4c1b-81c4-1784a0b95f37" alt=""><figcaption></figcaption></figure>

#### ⚙️ Advanced settings:&#x20;

In this section, you can configure several advanced settings for your product option elements:

1. **Add-on Advanced Function**
   * This allows you to customize how add-on products behave.
   * [Learn more about the add-on advanced function here.](https://docs.globo.io/options/add-on-feature/advanced-add-on-function)
2. **Allow Value:** Define what kind of input customers are allowed to enter.

* **Option: Default :** Customers can enter **any value** freely without restrictions.

<figure><img src="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FFxky7TwusCov2bs3OLTT%2FMonosnap%20%5BDemo%5D%20-%20Globo%20Product%20Options%20%C2%B7%20Globo%20Product%20Option%20%C2%B7%20Shopify%202025-04-16%2009-19-23.png?alt=media&#x26;token=1b2e0660-e3c1-40fb-8071-c86d18325746" alt=""><figcaption></figcaption></figure>

* **Letter**: Only letters are allowed (A–Z, a–z)

<figure><img src="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FO0XT1LFUFGUMyVwBbRqa%2Fimage.png?alt=media&#x26;token=4316eea0-fc6f-402a-92c6-cf4dcb09c376" alt=""><figcaption></figcaption></figure>

* **Letter and Number**: Only letters and numbers are allowed

<figure><img src="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FF1yxQG4ptszfP6KbFJAA%2Fimage.png?alt=media&#x26;token=d459a360-a40a-4b97-90d9-ef46a0e6869e" alt=""><figcaption></figcaption></figure>

3. **Text transform**

Define how the entered text will be displayed:

* **None**: Keep the text as entered.
* **Always Uppercase**: Convert all letters to uppercase.
* **Always Lowercase**: Convert all letters to lowercase.

**4. Helptext Position**

Choose where to display the help text for the option element:

* **Below Option Label**
* **Below Option Element**
* **Above Option Element**
* **Tooltip**

<figure><img src="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2Fm0dqu2a7LXjOrRJzyfS1%2Fimage.png?alt=media&#x26;token=c7296191-d221-4fb7-93fe-8bb988b93640" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2Fx69BZ999Yl1HSbJTgPIL%2Fimage.png?alt=media&#x26;token=a2d5da78-af6a-46ab-9193-c07babfd2076" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FkvW2B3nap4SPgvtt73v1%2Fimage.png?alt=media&#x26;token=2237b885-ebd6-4085-8c19-0c1e9bfc398a" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FH8rsilYDDACAb4sDsY4L%2Fimage.png?alt=media&#x26;token=b400b959-3516-4a07-bf12-da7298b56d40" alt=""><figcaption></figcaption></figure>

4. **Sufix/Prefix**

You can configure a **prefix** or **suffix** to display inside the input field, helping guide the customer’s entry or add context to their input.

<figure><img src="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FfX5FyeV2tv2Z79ipzfhu%2FMonosnap%20%5BDemo%5D%20-%20Globo%20Product%20Options%20%C2%B7%20Globo%20Product%20Option%20%C2%B7%20Shopify%202025-04-16%2009-39-05.png?alt=media&#x26;token=dc5bcfb0-9b6e-4405-8a3f-2e97804002c0" alt=""><figcaption></figcaption></figure>

5. **HTML class**&#x20;

You can assign a custom HTML class to an element to control its styling or behavior using CSS or JavaScript.

6. **Column width**

You can **adjust the width** of each form field by setting its **column width**—this helps in creating a more compact, responsive, and visually appealing form layout.

<figure><img src="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FaWrdbNuhZ5845C7CVgux%2Fimage.png?alt=media&#x26;token=35409b9e-c972-4fc6-903a-264be2388e2a" alt=""><figcaption></figcaption></figure>

📧 **Need Help?**\
If you run into any issues while setting up your option set, feel free to reach out to us at **Chat** or email **<contact@globosoftware.net>**.

We’re always here and happy to help — with sincerity and care!