Back to Dictionary
Scroll & Navigation
●●○Customize

Expandable Search Input

Initially just a circular search magnifying glass icon. Upon interaction, it elastically unravels horizontally into a full active text input field.

Live Demo

What It Is

Initially just a circular search magnifying glass icon. Upon interaction, it elastically unravels horizontally into a full active text input field.

✓When to Use

  • Minimalist headers
  • Mobile navigation bars
  • Secondary toolbars

✕When NOT to Use

  • Search-centric pages (like Google or E-commerce catalogs) where the search bar must always be fully visible

Configuration Tips

  • 01Animate the width of the container from `40px` (icon size) to `100%` / `300px` within a layout group.

You've Seen It In

Apple.comNotionVarious minimal blogs

Prompt Templates

Copy and paste these prompts into your AI coding assistant.

Build a circular button with a search icon that cleanly expands into a 250px wide text input upon clicking.

Code Example (Tailwind CSS)

export function ExpandableSearchBarDemo() {}

Related Effects

Accordion Expand

A panel that smoothly grows in height to reveal hidden content, pushing the elements below it smoothly downwards.

Dynamic Island Expand

A top-anchored capsule that fluidly morphs into a larger notification card, accommodating new UI controls, and smoothly reverts to a resting pill shape.