FreeInputs

Placeholders And Vanish Input

Use this component for search bars, AI prompt boxes, support forms, and hero capture inputs.

ReactTailwind CSSInputSearch

Overview

A rounded input with cycling placeholders and submit behavior that clears the field.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

No additional packages required after Tailwind CSS setup.

Usage

tsx

<VanishInput />

Placeholders And Vanish Input.tsx

tsx

"use client";

import { useState } from "react";

const placeholders = [
  "something is going live",
  "search components",
  "ask for a quote",
];

export function VanishInput() {
  const [index, setIndex] = useState(0);
  const [value, setValue] = useState("");

  function submit() {
    setValue("");
    setIndex((current) => (current + 1) % placeholders.length);
  }

  return (
    <div className="flex w-full max-w-xl items-center rounded-full bg-zinc-900 px-4 py-2">
      <input
        value={value}
        onChange={(event) => setValue(event.target.value)}
        placeholder={placeholders[index]}
        className="min-w-0 flex-1 bg-transparent text-sm text-white outline-none placeholder:text-zinc-500"
      />
      <button
        type="button"
        onClick={submit}
        className="flex h-8 w-8 items-center justify-center rounded-full bg-black text-sm text-white"
      >
        -&gt;
      </button>
    </div>
  );
}