How do I use the Input (Multi-Line) Component?

Modified on Mon, 30 Sep at 9:05 AM

The Input (Multi-Line) component in Droplet allows users to enter larger blocks of text, making it perfect for capturing more detailed responses. It works by providing a multi-line text area where users can type longer inputs, such as descriptions or comments. This component is helpful for collecting information that requires more space, like feedback or narratives, ensuring users aren’t limited to a single line of text.

When should I use a Multi-Line Input?

The Input (Multi-Line) component works best when gathering longer responses, such as feedback, comments, or detailed descriptions. To avoid overwhelming users, try to limit its use to fields where extended input is necessary, and always set clear expectations with labels and placeholder text.

Here are some common scenarios where a Multi-Line Input component is ideal:

Feedback Forms
When asking users for feedback, Multi-Line Inputs provide the necessary space for them to elaborate on their experiences.

Detailed Descriptions
For forms that require users to describe something at length—such as their goals or project details—this component allows for longer entries without crowding the form layout.

Customer Support Requests
When collecting support tickets or requests, users can provide more context or details in a Multi-Line Input, helping you understand their issues clearly.

Features & Configuration

Adding an Input (Multi-Line) component to your form is straightforward. Simply click on the Input option in the component library and drag it onto the canvas.

After placing the component, you can customize its properties in the right-hand panel:

Properties

Label
This text displays above the input field to describe what the user should enter.

Width
Choose a width (between 1 and 12).

Required
When enabled, it forces the user to enter an appropriate value if the field is visible. To make the field optional, disable it.

Input Settings

Number of Lines
You can establish the number of lines of text (essentially, the height) you want for the input box.

Max Length
Limit the number of characters the user can enter by setting a maximum length. This is helpful when you need to restrict responses to a certain size.

Enable Resize
Enabling this setting will give your submitter the ability to manually resize the height of the input box, affording them more flexibility when completing the form.

Logic

Display Logic
Control when this component shows or hides. We have a full guide on Display Logic for you!

Details

Placeholder Text
You can add placeholder text to guide users on what to enter. For example, in a field asking for the purpose of a trip, you might set the placeholder as a sentence starter, like “The purpose of this trip is to…”. This helps give submitters a starting point for their response, while still allowing them to phrase it however they’d like.

Hint
Hints are helpful text that appear underneath the component. They help you clarify things for submitters.

Tooltip
Tooltips are helpful text that submitters can see when they hover over the question mark icon.

Name
By default, this matches the Label, but you can change it if you want a different column header to appear in the CSV or spreadsheet exports data.

ID
Each Droplet component has a unique ID to reference in other parts of your form, workflow, and notifications. It's best to edit these IDs to make them a bit more descriptive.