📘

Note

This feature is available starting in Rapid UI v6.3.0 and later. Please make sure you are on this version or above to use the scrolling behavior.

Overview

The Scrolling Placeholder feature enhances the search bar by rotating through a set of example search queries, each displayed with a smooth typing-out animation. This interactive behavior encourages user exploration, guides input, and boosts overall engagement. Previously limited to a single static placeholder, the search bar now supports an array of rotating examples, offering users more inspiration and helping them discover how to interact with search more effectively.

Where It's Available

This feature is supported in the configuration of the following search components:

Keyword Search

Concept Search

Unified Search

Image Search

Behavior

1. Examples scroll sequentially in the search field.
2. Each phrase is displayed with a typing-out animation.
3. The cycle loops continuously through all examples.
4. Animation speed and style are fixed and not configurable.

Best Practices

1. Use realistic and relevant search suggestions.
2. Keep phrases concise and easy to read.
3. Aim for 3–5 entries to ensure optimal pacing.
4. Avoid lengthy or unclear examples.

Configuration

To enable the Scrolling Placeholder, pass an array of strings to the placeholder field inside the strings object.

📘

Note

1. The placeholder field supports either a string (for static text) or an array of strings (for scrolling behavior).
2. There is no hardcoded limit to the number of entries. However, using too many examples is not recommended, as it may reduce clarity, overwhelm users, or dilute the effectiveness of the suggestions. For best results, use 3–5 concise entries.
3. The feature activates automatically when an array is detected.

Example: Static Placeholder

strings: {
  placeholder: "Search for items, brands, or categories"
}

Example: Scrolling Placeholder

strings: {
  placeholder: [
    "Search for tools",
    "Find outdoor furniture",
    "Browse popular accessories"
  ]
}