Label Widget

Use this widget to display a label text on the form.

Last published at: June 3rd, 2024


Text can be placed on the Form using the label controls.


  • ID/Name - Name of widget generated by FlowWright (read-only field)
  • For - The For attribute specifies which form element the label is bound to. The label element allows the user to give focus to a form element by clicking on an associate label. If you do not use the for attribute, this association will not be made. 
  • Label Text—Enter the label's description text. To include multiple lines, select the "Enable Multitext" checkbox. 
  • Label Width - The label width is set to the default value "auto" (read-only field)
  • Label Styles - Select the checkbox to choose Bold, Italics, or Underline options (tick mark) 
  • Fore Color - Select the foreground color from the palette 
  • Back Color - Select the background color from the palette 
  • Font Size - Select the font size
  • Hide - Select the checkbox to Hide (tick mark)
  • Tool Tip - Enter information to display on mouse hover on form render
  • Styles - Enter the CSS scripts for widget styles
  • Apply Classes - Select between custom classes defined 
  • Save - Save the input values 
  • Delete - Remove this form widget from the designer page 
  • Close - Close the input popup window






Let’s build and execute the LabelDef example.  

  • Create a new form definition called “LabelDef.
  • Select the Open Designer checkbox and click the “Create” button
  • Drag a Label widget to the canvas
  • Double-click on the widget to configure its “Settings” properties. Provide a name to the control. Select the check box to enable multi-line text. Select the check box to hide the label during run time. 


  • Double-click on the widget to configure the “Styling” properties. Provide the label width, where “auto” is the default setting. Select the check box to apply bold, italics, and underlined styles to the label. Configure the colors for the foreground and background. Configure the horizontal and vertical alignment. Select the font size from the drop-down list. Provide the style script. Select the class from the drop-down list if it was previously uploaded.  


  • Double-click on the widget to configure the “Other” properties. Provide the tooltip text.


  • Click on the Save button and Close the popup window
  • Navigate to the UI menu and Preview the form.