Expandable Search Bar

An elegant, animated search bar that expands gracefully on interaction and features clear/command micro-interactions.

How to Import

Add this import to your component file

app/page.tsx

1import { ExpandableSearchBar } from "@/components/lightswind/expandable-search-bar"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

placeholder	string	"Search..."	The placeholder text for the search input.	Optional
expandedWidth	string \| number	"18rem"	The width of the search bar when expanded.	Optional
onChange	(value: string) => void	-	Callback fired when the input value changes.	Optional
onSubmit	(value: string) => void	-	Callback fired when the form is submitted (Enter key).	Optional
className	string	-	Additional CSS classes for the container.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { ExpandableSearchBar } from "@/components/lightswind/expandable-search-bar";
2
3export function SearchBarDemo() {
4  return (
5    <div className="flex justify-center py-20">
6      <ExpandableSearchBar placeholder="Search documents..." expandedWidth="20rem" />
7    </div>
8  );
9}

Previouselectro-border

Nextexpandable-speed-dial

A product byＭＵＨＩＬＡＮ and Team❤️.

Expandable Search Bar

An elegant, animated search bar that expands gracefully on interaction and features clear/command micro-interactions.

...

How to Import

Add this import to your component file

app/page.tsx

1import { ExpandableSearchBar } from "@/components/lightswind/expandable-search-bar"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

placeholder	string	"Search..."	The placeholder text for the search input.	Optional
expandedWidth	string \| number	"18rem"	The width of the search bar when expanded.	Optional
onChange	(value: string) => void	-	Callback fired when the input value changes.	Optional
onSubmit	(value: string) => void	-	Callback fired when the form is submitted (Enter key).	Optional
className	string	-	Additional CSS classes for the container.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { ExpandableSearchBar } from "@/components/lightswind/expandable-search-bar";
2
3export function SearchBarDemo() {
4  return (
5    <div className="flex justify-center py-20">
6      <ExpandableSearchBar placeholder="Search documents..." expandedWidth="20rem" />
7    </div>
8  );
9}

Previouselectro-border

Nextexpandable-speed-dial

A product byＭＵＨＩＬＡＮ and Team❤️.

Expandable Search Bar

How to Import

Props

Basic Usage

On This Page

Contribute

Expandable Search Bar

How to Import

Props

Basic Usage

On This Page

Contribute

React Expandable Search Bar Component - Lightswind UI

Key Details of React Expandable Search Bar

Expandable Search Bar

How to Import

Props

Basic Usage

On This Page

Contribute

Expandable Search Bar

How to Import

Props

Basic Usage

On This Page

Contribute