Vanish Input

Search field whose placeholder cycles while empty.

1.6 KB gzipped
Deps: motion/react
Reduced-motion safe
Base UI & Radix compatible

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/vanish-input.json

Adds components/velora/vanish-input.tsx, installs motion.

Props

Prop	Type	Default
`placeholders*` Cycled through while the field is empty	`string[]`	`—`
`interval` Seconds each placeholder is held	`number`	`3`
`label` Accessible name for the input	`string`	`"Search"`
`onSubmit`	`(value: string) => void`	`—`
`className`	`string`	`—`

Accessibility

Reduced motion: The placeholder does not cycle: it stays on the first entry, with no slide or fade.
Keyboard: A native form: the input is focusable, Enter submits, and focus stays in the input after submitting. The placeholder stops cycling while the field is hovered or focused.
Screen readers: The input is named by the `label` prop (default "Search"); the rotating placeholder is aria-hidden and the icon button is named "Submit".