How to Set Border Colors with the Affected Elements Node

Overview

The Set Border Color action lets you change the border color of supported elements directly in the Actions Flow. You can use a color picker, HEX value, color name, or dynamic variable to apply styling without custom code.

This gives you more control over how users visually navigate and understand your interface.

When to Use This

Use the Set Border Color action to guide users through an experience by visually indicating state, focus, or progression.

This is especially useful when:

• Highlighting the active section in a multi-step flow
• Showing which sections are complete or still in progress
• Drawing attention to areas that require review or action
• Distinguishing editable sections from read-only content
• Applying consistent brand or accessibility styling

Border color changes respond immediately to Actions Flow logic, helping users understand what’s happening without adding extra components or text.

How It Works

The Affected Elements node includes a Set Border Color action that applies runtime styling to supported elements.

You can:

• Select one or more supported elements
• Apply a border color using multiple input formats
• Combine border color actions with other styling or behavior actions
• Edit or remove the action at any time
  

Unsupported elements are automatically disabled so you can clearly see which components can receive border updates.

How To Guide

1. Open your Actions Flow and add an Affected Elements node.

2. In the Affect Elements panel, select one or more elements from the list.

• You can search for elements or apply filters if needed.
• Unsupported elements appear disabled and cannot be selected.
  

3. In the action dropdown at the bottom of the panel, select Set border color.
4. Choose how the color should be set:
   

• Static to define a fixed color
• Variable to apply a dynamic value
  

5. Define the border color using one of the following:

• The color picker
• A HEX value
• A color name
• A dynamic variable
  

6. Click Apply to attach the action to the selected elements.

• A tag appears next to each affected element showing the configured border color.
  

7. To edit the border color, click the pencil icon on the tag and update the value.
8. To remove the border color action, click the X icon on the tag.
9. Click Next to continue configuring the flow, or Back to revise your selection.
10. (Optional) Enter a tag name to describe the purpose of the action.

• Tag names help you identify what the affected element is doing when reviewing or debugging the flow.
• This is especially useful when multiple actions are applied to the same elements.