Separator component in adaptive forms

You can use the separator component to visually segregate panels of a form. You can define the overall appearance and style of a separator component by specifying the following properties of separator component:

• Element Name: Specifies the name of the component. The SOM expressions addresses the component with value specified in the Element Name field.
• Thickness:  Specifies the thickness of the separator component in pixels.
• Colspan: Specifies the number of columns a separator component spans to.
• CSS Class: Specifies the custom CSS class for the separator component
• Inline styles: With AEM Forms, you can now apply inline CSS styles to individual adaptive form components and preview the changes in real-time.

To specify properties of a separator component:

1. Select a separator component and tap . The properties open in sidebar.
2. Click a tab in the Inline CSS Properties section to specify CSS properties. For example: a. In the Field tab, click Add Item. A row with two fields gets added.
3. In the first field from left, specify a CSS3 property you want to apply. For example, border. You can also select a property by clicking the down-arrow button. The drop-down list is not exhaustive and you can specify any supported CSS3 property name in this field.
4. In the adjoining field, specify a valid value for the specified CSS3 property. For example, 3px solid black.
5. Click Add Item to specify another property and its value.
6. Click Preview to preview the changes in the form.
7. Click OK to confirm the changes or Cancel to exit the dialog without any changes.