Expose Style Settings for Your Custom Flow Screen Components

Let flow authors customize Lightning web components (LWC) by adding styling hooks to your code. The hooks define which properties an author can adjust in Flow Builder, such as colors and dimensions to match branding needs.

How: In your component’s .js-meta.xml file, add a <stylingHook /> tag as a child of the <targetConfig targets="lightning__FlowScreen"> tag. Specify the hook name, label, and type. For components with lots of styling options, use the <stylingHookGroup /> tag to organize the options into intuitive groups or tabs within the Flow Builder interface.

   <targetConfig targets="lightning__FlowScreen">
       <stylingHook name="--slds-c-button-radius-border" label="Border Radius" type="dimension"/>
       <stylingHook name="--slds-c-button-sizing-border" label="Border Weight" type="dimension"/>
       <stylingHookGroup name="default" label="Default" displayInTab="true">
           <stylingHook name="--slds-c-button-neutral-color-background" label="Background Color" type="color"/>
           <stylingHook name="--slds-c-button-text-color" label="Text Color" type="color"/>
           <stylingHook name="--slds-c-button-neutral-color-border" label="Border Color" type="color"/>
       </stylingHookGroup>
   </targetConfig>