How do I use the Input (Single Line) Component?

Created by Nick Duell, Modified on Thu, 10 Oct at 9:21 AM by Nick Duell

The Input (Single Line) component in Droplet is a basic yet versatile field that allows users to enter a small amount of text or numbers into your form. It works by providing a single line of input where users can type information such as names, phone numbers, or short responses. This component is helpful for collecting concise, specific data that doesn’t require multiple lines of text, ensuring your forms remain clean and easy to navigate.

When should I use a Single Line Input?

The Input (Single Line) component works best when you need to collect concise, short responses. This is ideal for fields that don’t require more than a single line, like entering a name, phone number, email address, or a brief answer.


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

Name Field
Use this for fields where users need to input their first and/or last names. For example, “First Name” or “Last Name.”
Email Address
Use this to collect a valid email address, ensuring proper formatting. The component can be set to validate emails automatically.
Phone Number
Use this for inputting phone numbers. You can also add a mask to ensure the correct format is used (e.g., (XXX) XXX-XXXX).  Read below about masks!

Features & Configuration

Adding an Input (Single 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

Type
Specify the type of input expected: Text, Email, or Number.
Text
Most common option chosen, since it allows all types of values
Email
Requires a valid email format and shows an error if the input doesn’t match
Number
Only allows numerical inputs
This setting helps ensure that the data entered by users is in the correct format.
Mask (for Text Type only)
For Text Inputs, you can also apply a Mask to enforce specific formatting, ensuring users enter the correct number of characters. There are a few preset masks: Phone, Dollars, and Social Security.


For even more control, choose Custom from the Mask dropdown to set up your own formatting rules using RegEx. If you’re familiar with RegEx, this option gives you the flexibility to define exactly how the input should look (RegEx cheat sheet).

Logic

Display Logic
Control when this component shows or hides. We have a full guide on Display Logic for you!
Validate Logic
This logic decides what is valid input for this component. This is helpful when there are special circumstances around the input being valid. This article can help you configure validation logic.

Details

Placeholder Text
You can add placeholder text to guide users on what they should enter. For example, in an address field, you might set the placeholder to “123 Main Street” to provide a clear example of the type of information expected. 
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.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article