ComponentsAnimated Input

Animated Input

A text input with a floating label and smooth animation.

Code

1

Install with shadcn Beta

Terminal

npx shadcn@latest add "https://smoothui.dev/r/animated-input.json"

Or install the demo

Terminal

npx shadcn@latest add "https://smoothui.dev/r/animated-input-demo.json"

How to use

Demo.tsx

"use client"

import { useState } from "react"
import { User } from "lucide-react"

import AnimatedInput from "@/components/smoothui/ui/AnimatedInput"

export default function AnimatedInputDemo() {
  const [value, setValue] = useState("")
  return (
    <div className="max-w-xs space-y-6">
      <AnimatedInput
        label="Controlled"
        value={value}
        onChange={setValue}
        placeholder="Type here..."
      />
      <AnimatedInput label="Uncontrolled" defaultValue="Hello" />
      <AnimatedInput
        label="With Icon"
        icon={<User size={20} strokeWidth={1.5} />}
        placeholder="Username"
      />
    </div>
  )
}

Props

PropTypeDescription
value?stringControlled value.
defaultValue?stringUncontrolled initial value.
onChange?(value: string) => voidCallback when value changes.
labelstringInput label.
placeholder?stringInput placeholder.
disabled?booleanDisable the input.
className?stringClass name for the root.
inputClassName?stringClass name for the input.
labelClassName?stringClass name for the label.
icon?React.ReactNodeOptional icon.