How to Add Placeholder to Text Field in Screen Flow

Screen Flow is the only flow type that supports the screen element, which allows you to collect or display data. Using the out-of-the-box screen components, you can build almost any kind of form. Although the standard text input component is sufficient for most text fields, it lacks one important feature: it doesn't support placeholders. However, by using a custom text input component (LWC), you can add a placeholder to a text field in Screen Flow.

How to Use the Component

1- Install the package using the installation links below.

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

3- This component has multiple configuration parameters.

Disabled: Boolean parameter to make the text input disabled.
Label: Label of the text field. You can type the label or use a resource.
Placeholder: You can type the placeholder or use a resource.
Read Only: Boolean parameter to make the text input read only.
Required: Boolean parameter to make the text input required.
Value: This is the value of the text input component. You can set the default value using this parameter.

More importantly, every parameter is reactive! For example, you can make the text input component required if it meets certain criteria. Additionally, you can change the label or placeholder values dynamically based on other resources.

Advantages of the Component

This custom Text Input component works similarly to the standard text input component but offers a few additional advantages.

• Adding Placeholder: It is possible to add placeholder to this text input component.
• Making Required: The standard component can also be set as required, but it cannot be made conditional. However, this custom component accepts variables for the "Required" parameter, allowing you to make the text input mandatory based on specific conditions.
• Dynamic Label: You can easily select a resource for the label, and it's reactive!

Here is a simple form with a little bit of CSS.

Installation Links

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

Use this link to install in sandbox environments.