Expandable Search

An expandable search is a compact search field that animates from an icon-width trigger to a full input on expand.

Examples

Collapsed State

Without .ro-state-expanded, the wrapper uses --ro-expandable-search-collapsed-width (default icon width).

<div class="ro-expandable-search">
  <div class="ro-input-group ro-expandable-search-input">
    <div class="ro-input-slot">
      <i class="ro-icon ro-icon-search" aria-hidden="true"></i>
    </div>
    <input type="search" placeholder="Search…" />
  </div>
</div>

Preview

Expanded State

Use .ro-expandable-search.ro-state-expanded on the wrapper and .ro-expandable-search-input on the input group. Requires Inputs markup (.ro-input-group, .ro-input-slot).

<div class="ro-expandable-search ro-state-expanded">
  <div class="ro-input-group ro-expandable-search-input">
    <div class="ro-input-slot ro-input-slot-left">
      <i class="ro-icon ro-icon-search" aria-hidden="true"></i>
    </div>
    <input class="ro-input" type="search" placeholder="Search…" />
  </div>
</div>

Preview

Sizing

Use .ro-size-sm (192px) or .ro-size-lg (384px) to control the expanded width (maps to expanded-width in Vue).

<div class="ro-expandable-search ro-state-expanded ro-size-sm">…</div>
<div class="ro-expandable-search ro-state-expanded ro-size-lg">…</div>

CSS Custom Properties

Variable	Default	Description
--ro-expandable-search-collapsed-width	var(--ro-size-8)	Width when collapsed.
--ro-expandable-search-width	240px	Width when expanded.

JavaScript is required to toggle between collapsed and expanded states. In Vue apps, use RoExpandableSearch from @ringover/ringo-ui.