Floating Input
Free
A text field whose label floats up on focus, with an underline that grows from the center and an error that shakes.
Customize
Start with error
#ff784f
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/floating-input.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/floating-input.tsx.
Usage
import { FloatingInput } from "@/components/ui/floating-input";
<FloatingInput
label="Email address"
type="email"
name="email"
autoComplete="email"
error={errors.email}
/>Props
11 properties| Property | Type | Default | Description |
|---|---|---|---|
| label | string | — | Text that sits inside the field and floats up on focus or value. |
| value | string | — | Controlled value. Leave it out to let the field manage itself. |
| defaultValue | string | "" | Starting value when uncontrolled. |
| onChange | (event: ChangeEvent<HTMLInputElement>) => void | — | Native change handler. |
| error | boolean | string | — | Marks the field invalid and shakes it. A string is shown as the message. |
| hint | string | — | Helper text under the field while there is no error. |
| type | string | "text" | Native input type, such as email or password. |
| color | string | "#ff784f" | Color of the floated label and the underline. |
| ref | Ref<HTMLInputElement> | — | Forwarded to the input. |
| className | string | — | Extra classes for the wrapper. |
| ...props | InputHTMLAttributes | — | Any native input attribute, such as name, required or autoComplete. |
Dependencies: motion