Controls & Inputs

Rotating Search Input

플레이스홀더가 순환되고 제출 시 텍스트가 사라지는 검색 입력입니다.

Preview

action control

Vanish Input

submit to collapse the search

Installation

bash

Copied

1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/r/placeholders-and-vanish-input.json

bash

Copied

1npx shadcn@latest add https://ryong-blog.vercel.app/r/placeholders-and-vanish-input.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong-blog.vercel.app/r/placeholders-and-vanish-input.json

bash

Copied

1bunx shadcn@latest add https://ryong-blog.vercel.app/r/placeholders-and-vanish-input.json

Code

typescript

Copied

1import { PlaceholdersAndVanishInput } from "@/components/placeholders-and-vanish-input"23export default function Example() {4  return <PlaceholdersAndVanishInput placeholders={["Search docs", "Ask AI"]} />5}

Props

className

Type: string
Default: -
Description: Additional classes merged onto the component.

placeholders

Type: string[]
Default: -
Description: Placeholder values to rotate.

variant

Type: "light" | "glass"
Default: "light"
Description: Visual surface style.

onSubmit

Type: (value: string) => void
Default: -
Description: Submit handler.

Prop	Type	Default	Description
className	string	-	Additional classes merged onto the component.
placeholders	string[]	-	Placeholder values to rotate.
variant	"light" \| "glass"	"light"	Visual surface style.
onSubmit	(value: string) => void	-	Submit handler.

Reference

Aceternity Placeholders And Vanish Input