Kuika's Vertical Stack element is used to arrange user interface (UI) elements in a vertical row. This element provides a more readable and organized structure by stacking content on top of each other. It is ideal for scenarios requiring vertical layouts, such as form fields, list views, and information cards.

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

Areas of Use

• Arranging form fields vertically,
• Creating card or box structures,
• Arranging list items one below the other,
• Presenting content more legibly on mobile screens, etc.

Password Reset Form Fields Usage Scenario

On a password reset screen, form fields added to the Vertical Stack element are displayed in a vertical order.

• Your Password → Field where the user enters their new password
• Confirm Password → Verification field where the new password is re-entered
• Checkbox → Ensures the user accepts the terms and conditions
• Change Password button → Submits the form and saves the new password to the data source
• Alt text & link → Redirects to the membership screen with the phrase “Not a member yet? Sign up”

Using Features in a Scenario Context

• Vertical Stack displays each input field on a separate line.
• Equal spacing (Gap) is left between fields → default 12px.
• Mobile compatibility ensures the layout remains intact even on small screens.
• When the form is dragged to an empty area, it automatically comes with Row/Column.
• It can also be added inside elements such as Row, Panel, Input (TextInput, PasswordInput, Checkbox, Switch).
• If necessary, Horizontal Stack can be added inside Vertical Stack to create side-by-side fields (e.g., First Name & Last Name).

Gap Usage

• Description: Allows you to adjust the space between elements added to it.
• Default: 12 px
• Example: Leave a 12 px gap between the “Your Password” and “Confirm Password” fields.

When the Scenario Step is Complete

• The user sees the form fields stacked on top of each other.
• The spacing between them is set consistently.
• A consistent and readable appearance is achieved on both web and mobile.

Limitations

• Adding too many elements may require vertical scrolling.
• If the Gap value is set too low or too high, readability may be compromised.

Tips and Best Practices

• Use Vertical Stack in forms to arrange fields in a logical order.
• In list structures, use the Vertical Stack + Row combination to provide both horizontal and vertical alignment.
• Test spacing values for mobile to achieve the best visual appearance.