`lightning__FlowScreen` Target

Enables a component to be used on flow screens in Flow Builder.

Syntax

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3  <apiVersion>58.0</apiVersion>
4  <isExposed>true</isExposed>
5  <targets>
6      <target>lightning__FlowScreen</target>
7  </targets>
8</LightningComponentBundle>

targetConfigs

Configures the component for flow screens and defines component properties. The targetConfigs tag contains at least one targetConfig tag.

targetConfig

Configures a component for flow screens with these attributes.

Attribute	Description	Required
`targets`	Specify one or more page types in the `targets` attribute, such as `<targetConfig targets="lightning__FlowScreen">` or `<targetConfig targets="lightning__FlowScreen,lightning__AppPage">`. The `targets` attribute value must match one or more of the page types that you listed under `<targets>`.	Yes
`configurationEditor`	Registers a custom property editor for a flow screen component. A custom property editor is a Lightning web component that provides a custom UI for configuring a custom flow screen component’s input attributes. See Customize Action and Screen Component UI in Flow Builder.

The targetConfig tag includes at least one property tag. You can also include one or more propertyType tag.

property

Specifies a public property of a component that can be set in Flow Builder. The component author defines the property in the component’s JavaScript class using the @api decorator. See the Usage section.

Use the property tag with these attributes.

Attribute	Type	Description	Required
`name`	String	The attribute name. This value must match the property name in the component’s JavaScript class.	Yes
`type`	String	The attribute’s data type. Make sure that the value used matches the type assigned to the property in the component’s JavaScript module. If the types don’t match, the value in the configuration file takes precedence. The following values are valid for all targets. `Boolean` `Integer` `String` `Double`—Only valid when the property has the attribute `flowRole="flowRunetimeApiVersion"`. `apex://namespace.Classname`—An Apex class used for an Apex-defined data type. If the class is in the same namespace as the component, don’t specify a namespace. If the class is in a managed package, specify the namespace of the managed package. `Date`—A date in ISO 8601 format. `DateTime`—A datetime in ISO 8601 format. `@salesforce/schema/namespace__Objectname` or `@salesforce/schema/Objectname`—An object. See `@salesforce` modules.	Yes
`default`	String	The default value for the attribute.
`description`	String	Displays as an infobubble for the attribute in Flow Builder.
`label`	String	Displays as a label for the attribute in Flow Builder.
`required`	Boolean	Specifies whether the attribute is required. The default value is `false`.
`role`	String	Specifies whether the attribute is `inputOnly` or `outputOnly`. If you don’t specify the `role` attribute, the default value allows input and output. For example, if a property is restricted to `outputOnly`, users can’t set its value from a Lightning record page. If you don’t set the role attribute, or if you set it to `inputOnly`, the property is exposed in a custom property editor. If you set it to `outputOnly`, the property isn’t exposed in a custom property editor.
`flowRole`	String	Specifies a flow-dependent role for the property. `flowRuntimeApiVersion`—Configures the property to return the runtime API version of the flow in which the component is used. This property doesn’t render in Flow Builder, but conditional code can execute based on the version returned. Set `type="Double"` and `role="inputOnly"` to use this value.

propertyType

Defines a data type to extend for component properties in flow screen components. Only generic sObject and sObject collection data types can be extended.

Use the propertyType tag with these attributes.

Attribute	Type	Description	Required
`name`	String	Specifies the data type name to reference from each `type` attribute that is defined in a component’s `property` tag.	Yes
`extends`	String	Specifies the data type to extend for component properties.	Yes
`description`	String	Description of the property type.
`label`	String	Label of the property type.

stylingHook

Defines a styling hook to surface in Flow Builder for a flow screen component. Users can edit the hooks directly in the Style tab while building a flow screen.

Attribute	Type	Description	Required
`name`	String	Specifies the styling hook to surface. This value must match either a custom-defined CSS styling hook or a predefined SLDS 1 styling hook.	Yes
`label`	String	Displays as a label for the attribute in Flow Builder.	Yes
`type`	String	Specifies the type of editor displayed in Flow Builder. Valid values are `color`, `dimension`, or `string`.	Yes
`description`	String	Displays as an infobubble for the attribute in Flow Builder.

stylingHookGroup

Defines a group of styling hooks. This tag is optional, but it’s useful for organization if the component has many styling hooks. Nest stylingHook tags within a single stylingHookGroup to group them together.

Attribute	Type	Description	Required
`name`	String	Specifies an arbitrary identifier for the group. This value must be unique within the component’s configuration file.	Yes
`label`	String	Displays as the group’s title or tab label in Flow Builder.
`displayInTab`	Boolean	Specifies whether the group renders as one tab in a set. Defaults to `false`.

Any given configuration can have only one set of tabs. All groups set to displayInTab="true" render within the same set of tabs. All groups not displayed as tabs render before the tab set.

Note

Usage

To expose a component property in Flow Builder, define the property in the component’s JavaScript class using the @api decorator.

1import { LightningElement, api } from "lwc";
2
3export default class Example extends LightningElement {
4  @api volume;
5}

For more information, see these examples:

See Also

lightning__FlowScreen Target