Controls & Inputs

Rotating Search Input

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

Preview

action control

Vanish Input

submit to collapse the search

Search components

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong.dev/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

PropTypeDefaultDescription
classNamestring-Additional classes merged onto the component.
placeholdersstring[]-Placeholder values to rotate.
variant"light" | "glass""light"Visual surface style.
onSubmit(value: string) => void-Submit handler.

Reference

Aceternity Placeholders And Vanish Input