Animated Input

A highly interactive input component featuring smooth floating labels and custom hex color glow effects on focus.

Installation

npx raya-ui@latest add animated-input

File Structure

your-project

components

AnimatedInput.vue

API Reference

AnimatedInput

v-model

string | number

""

The bound value of the input field.

glow-color

string

"#a855f7"

The color of the focus glow effect. Accepts any valid CSS color string (Hex, RGB, HSL).

label

string

The text displayed as the floating label.

placeholder

string

The placeholder text shown when the input is focused and empty.

Settings

Glow Color (Hex)

Label

Placeholder

Disabled State

source-code.vue

<script setup lang="ts">
import { ref } from 'vue'
import { AnimatedInput } from '@/components/ui/animated-input'

const value = ref('')
</script>

<template>
  <AnimatedInput
    v-model="value"
    label="Email Address"
    placeholder="john@example.com"
  />
</template>