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.”
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.
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!
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.
This text displays above the input field to describe what the user should enter.
Width
Choose a width (between 1 and 12).
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.
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.
This setting helps ensure that the data entered by users is in the correct format.
Specify the type of input expected: Text, Email, or Number.
Text
Most common option chosen, since it allows all types of values
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
Requires a valid email format and shows an error if the input doesn’t match
Number
Only allows numerical inputs
Only allows numerical inputs
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).
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!
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.
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.
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.
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.
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.
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.
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
Feedback sent
We appreciate your effort and will try to fix the article