127 Components
Text Field with Floating Label
InputsSoft rounded input field with a spring-animated floating label, accent focus ring, inline clear button, password visibility toggle, and validation caption.
Your email is used for CLI registry authentication.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/floating-label-input.json"
Props
TypeScript props supported by <FloatingLabelInput />.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Apple ID or Email Address" | Floating label text inside the field. |
| value | string | — | Controlled input value. |
| defaultValue | string | "rishabh@boseui.com" | Initial value for uncontrolled mode. |
| onChange | (value: string) => void | — | Callback fired when the input text changes. |
| type | "text" | "email" | "password" | "url" | "email" | HTML input type (adds visibility toggle when set to 'password'). |
| helperText | string | — | Optional helper caption displayed below the field. |
| error | string | — | Optional error message that activates the red validation ring. |
| clearable | boolean | true | Shows a quick-clear button when the input is non-empty. |
| disabled | boolean | false | Disables the text field. |
| className | string | — | Additional Tailwind CSS classes for the wrapper. |
Key Features
- Smoothly floats and scales the label (`scale: 0.82, y: -10`) when focused or populated.
- Soft 16px rounded container with a 3px halo focus ring (`ring-3`).
- Built-in clear button, password show/hide toggle, and error/helper caption support.
Keyboard & Accessibility
- Associates `<label>` and `<input>` via unique `useId()` `htmlFor`/`id` attributes.
- Clear button uses `onMouseDown={(e) => e.preventDefault()}` so input focus is preserved when clearing.
- Respects `prefers-reduced-motion` for label float transitions.