A text field whose label floats up on focus or when filled, with an animated focus line and error and success states.
Get early access
Add a full domain, like fernhill.co
npx shadcn@latest add https://hyperblur.dev/r/input-floating-label.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/input-floating-label.tsx.
import { InputFloatingLabel } from "@/components/hyperblur/input-floating-label"
<InputFloatingLabel label="Email" type="email" hint="We never share it" />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | required | Label text. It sits inside the field and floats when focused or filled. |
| error | string | Error message. Turns the field red, shakes it once and shows the message below. | |
| success | boolean | false | Valid state. Turns the field green and draws a check. |
| hint | string | Helper text shown below the field when there is no error. | |
| icon | ReactNode | Optional leading icon. | |
| accent | string | "#2f7bff" | Focus color. |
| value, defaultValue, onChange, type, ... | InputHTMLAttributes | All other props go to the input, so it works controlled or uncontrolled. className and style go to the root. |