Skip to main content

​
Overview

An engaging input component featuring sliding placeholders that cycle through prompts and a vanish effect on submit. Perfect for creating dynamic, interactive form experiences.

​
Usage

<template>
  <VanishingInput
    :placeholders="[
      'What's your favorite movie?',
      'What's your dream destination?',
      'What's your favorite food?'
    ]"
    @change="handleChange"
    @submit="handleSubmit"
  />
</template>

<script setup>
const handleChange = (event) => {
  console.log('Input changed:', event.target.value)
}

const handleSubmit = (value) => {
  console.log('Form submitted with:', value)
}
</script>

​
Props

Prop NameTypeDefaultDescription
placeholdersArray<string>["Placeholder 1", "Placeholder 2", "Placeholder 3"]An array of placeholder texts that cycle through as prompts in the input field.

​
Events

Event NameParametersDescription
changeEventTriggered when the input value changes.
submitstringTriggered when the input is submitted.

​
Features

  • Animated placeholder cycling
  • Smooth vanish effect on submit
  • Customizable placeholder prompts
  • Clean, modern design

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us