Multi Text Input Component for Screen Flow

Multi Text Input Component for Screen Flow

When building screen flows in Salesforce, most of the time we use the standard text input component for text fields. But what if you need users to enter multiple text values? Unfortunately, there’s no standard way to do that. You could try using a repeater with text fields, but that quickly becomes clunky, takes up too much space, and doesn’t provide the best experience. For example, if you want users to enter multiple email addresses for a Send Email action, you usually have to rely on them separating the addresses with commas. However, it isn’t a reliable approach and can easily cause mistakes.

In this post, you can find a screen component (LWC) that solves this problem. It provides a clean and efficient way to enter multiple text values in your flow screens.

How to Use the Component

1- Install the package using the installation links below.

2- Create a screen flow and add the "Multi Text Input" screen component to a flow screen.

Adding the Multi Text Input Component

3- Configure the component according to your needs.

Multi Text Input Configuration
  • Allow Duplicates: Allow users to enter duplicate values when you set this to true.
  • Case-Sensitive Duplicates: Detect duplicates with case sensitivity when you set this to true. For example, AA and Aa count as different values.
  • Label: Define the label that appears on the component.
  • Max Item Length: Limit the number of characters users can enter for each item.
  • Max Items: Limit how many items users can enter.
  • Min Item Length: Require a minimum number of characters for each item.
  • Placeholder: Show placeholder text inside the input field.
  • Required: Make the component required when you set this to true.
  • Trim Items: Remove extra spaces from items when you set this to true.
  • Validation Regex: Apply a regular expression to validate each item.
  • Values (comma-separated): Provide default values as a comma-separated list.

Example

Here’s a simple screen flow for sending emails. The Multi Text Input component collects multiple email addresses for the "To" and "CC" fields. Because these are email addresses, you can use a simple regex like this to validate the items:

^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$
Multi Text Input Component Example

At the end, the component looks like this:

Screen Flow

If any item doesn’t meet the rules (length, regex, etc.), the component shows a clear error message.

Error Message

The output of this component is a comma separated list of entered values. If you need to convert them into a text collection, you can follow the steps mentioned in this post.

Installation Links

Use this link to install in production or developer edition environments.

Use this link to install in sandbox environments.

Be the first to comment

Leave a Reply

Your email address will not be published.


*