Kuika's Horizontal Stack element is used to align user interface elements in a horizontal layout. It is particularly effective in form structures or groups of information that need to be displayed side by side. With Horizontal Stack, multiple elements can be arranged side by side and the spacing between them can be easily adjusted.

The Horizontal Stack element is supported in both web and mobile applications.

Areas of Use

• Placing form fields side by side,
• Arranging card, icon, or button groups horizontally,
• Displaying filtering and search fields on the same line,
• Arranging metric cards side by side on a dashboard, etc.

Name and Surname Fields in a Registration Form

A registration form requests the user's First Name and Last Name information.

• These fields, which would normally appear on two separate lines, are placed side by side using Horizontal Stack.
• This makes the form more organized and compact.
• When added to an empty area, it automatically comes with Row/Column.

UI Design Operations

• The following elements can be added to Horizontal Stack:
  
  • Row
  • Panel
  • Input (TextInput, Currency, SelectBox, Checkbox, Switch, etc.)
• Added elements are automatically aligned horizontally.

Using Properties in a Scenario Context

• Gap
  
  • Description: Sets the space value between elements.
  • Default: 12px
  • Example: Leave 20px space between the First Name and Last Name inputs.
• OverflowX
  
  • Description: Determines how overflowing content is displayed on the horizontal axis.
  • Options:
    
    • hidden: Overflowing content is hidden
    • auto: If there is overflow, a scroll bar is automatically added.

When the Scenario Step is Complete

• The First Name and Last Name fields are displayed side by side in the user form.
• The space between the two fields is determined by the Gap setting.
• If overflow occurs when fields are narrowed on mobile, OverflowX kicks in to prevent layout disruption.

Limitations

• Adding too many elements may require horizontal scrolling on mobile screens.
• If the Gap value is set too low, elements may appear stuck together.

Tips and Best Practices

• Use logically related fields (First Name–Last Name, Start–End Date) horizontally in forms.
• Displaying 3–4 cards horizontally is ideal on dense screens such as dashboards.
• If horizontal scrolling is required in mobile design, use OverflowX = auto.