Overview

The Spacer component is a design element used in user interfaces to define and adjust the spacing between other components, such as input fields. It acts as a non-visible element that structures and organizes layouts by creating empty spaces. This ensures the interface remains clean, well-structured, and visually appealing.

​

Key Feature

1. Height Specification:

   • You can define the height of the spacer in pixels to precisely control the space between elements.

   • This customization allows for consistent and adaptable layouts across various use cases.

2. Improved Visual Design:

   • By adding padding, margins, or gaps, the Spacer ensures that the interface remains user-friendly and visually harmonious.

3. Flexible Layout Support:

   • Works seamlessly with different UI components to create a balanced and uncluttered appearance.

​

Use Case Example

In a form containing multiple input fields, a Spacer can be used to adjust the vertical spacing between two fields. This not only improves readability but also enhances user interaction by avoiding crowded layouts.

​

Various Fields in Spacer Input

Height: The height of the spacer refers to the vertical distance or gap between two elements, sections, or components in a layout. It is used to control vertical spacing for better organization and visual balance.

Visibility Conditions: A rule or set of rules that determine whether a specific element, field, or component is visible to users in an application or interface. These conditions are typically based on factors such as user roles, permissions, field values, or contextual data. Visibility conditions ensure that users only see relevant information, improving usability and security. 

• Example  

  • Condition: Display a "Priority Escalation" section if the "Ticket Priority" is set to "High." 

  • Implementation: Visibility Condition: Ticket_Priority == 'High' 

  • Result: The "Priority Escalation" section appears only for high-priority tickets.