---
schema_version: "1"
id: 24d4d698c6fdf6a180b8c0cb844f9bbab9cd52a44eaeedf83fd26473afabafa0
title: Available For Flow Screens
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/aura/components/lightning/availableForFlowScreens/aura-available-for-flow-screens.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/aura-available-for-flow-screens.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 313d4bd945df4feb474ad59af8064155f107ad244aaeee69670d54290393d278
products:
  - Lightning Component Reference
---
# Available For Flow Screens

**`lightning:availableForFlowScreens`**

Enables a component to be used in flow screens.

**For Use In**

Lightning Experience

::::::tabset{tabs='[ "Develop", "Specifications"]'}

:::::tab

Add the `lightning:availableForFlowScreens` interface to a Lightning component to make it available for flow screens. This interface is supported only in Lightning runtime.

This example shows the markup required to add the `lightning:availableForFlowScreens` interface to a Lightning component.

```html
<aura:component implements="lightning:availableForFlowScreens">
  <!-- Your component markup here -->
</aura:component>
```

After making the component available to flow screens, you can add a resource bundle to enable attributes that admins can edit in the Cloud Flow Designer. You can also replace the whole flow screen with your own component.

For more information, see the [Lightning Aura Components Developer Guide](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_flow_screens_intro.htm).

## Custom Validation

Salesforce validates each flow screen when the user attempts to navigate to the next screen. If the flow screen is not valid, the user can’t progress. To validate the component with the flow screen, declare the `validate` attribute in the component. Set the `validate` attribute to a custom validation function that must return two parameters: `isValid` and `errorMessage`.

Here's example markup for a Lightning component with custom validation. The `validate` attribute is set by the component’s client-side controller later in this example.

```html
<aura:component implements="lightning:availableForFlowScreens" access="global">
  <!-- When the component renders, call the init handler. -->
  <aura:handler name="init" value="{!this}" action="{!c.init}" />
  <!-- Attribute to store the validation logic in. -->
  <aura:attribute
    name="validate"
    type="Aura.Action"
    description="Custom validation function to run when the flow is navigated to the next screen. The function must evaluate the component and return values for isValid and errorMessage."
  />
  <aura:attribute name="textAttribute" type="String" />
  <lightning:input
    id="nameinput"
    type="text"
    label="What is your name?"
    value="{!v.textAttribute}"
  />
</aura:component>
```

Here's the corresponding client-side controller. When the component renders, the `init` handler sets the component's `validate` attribute to a function that validates the component. When the user navigates to the next flow screen, the function in the validate attribute is run.

- If the component is valid, the function returns the `isValid` parameter as true and the user navigates to the next flow screen.
- Otherwise, the function returns the `isValid` parameter as false and a custom error message that displays under the Lightning component in the flow screen. The user can't navigate to the next screen until the function is successful.

```javascript
({
  init: function (cmp, event, helper) {
    // Set the validate attribute to a function that includes validation logic
    cmp.set("v.validate", function () {
      var userInput = cmp.get("v.textAttribute");
      if (userInput && userInput.length > 0) {
        // If the component is valid...
        return { isValid: true };
      } else {
        // If the component is invalid...
        return { isValid: false, errorMessage: "A value is required." };
      }
    });
  },
});
```


:::::

:::::tab
![No specifications to show](https://developer.salesforce.com/media/no-specs.png)

:::::

::::::