Input

Text 49

About

Upgaraded shadcn/ui Input

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Input to your project and fits it to your theme.

Code

How Input is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Input } from "@/components/ui/input";
import { useId } from "react";

function Component() {
  const id = useId();
  return (
    <div className="group relative min-w-[300px]">
      <label
        htmlFor={id}
        className="origin-start absolute top-1/2 block -translate-y-1/2 cursor-text px-1 text-sm text-muted-foreground/70 transition-all group-focus-within:pointer-events-none group-focus-within:top-0 group-focus-within:cursor-default group-focus-within:text-xs group-focus-within:font-medium group-focus-within:text-foreground has-[+input:not(:placeholder-shown)]:pointer-events-none has-[+input:not(:placeholder-shown)]:top-0 has-[+input:not(:placeholder-shown)]:cursor-default has-[+input:not(:placeholder-shown)]:text-xs has-[+input:not(:placeholder-shown)]:font-medium has-[+input:not(:placeholder-shown)]:text-foreground"
      >
        <span className="inline-flex bg-background px-2">Input with label animation</span>
      </label>
      <Input id={id} type="email" placeholder="" />
    </div>
  );
}

export { Component };