MiniDev UI

Floating Label Input

React floating label input and textarea where the label springs from inside the field onto the top border on focus or fill, with helper text, error state and leading icon.

src/registry/ui/floating-label-input.tsx/r/floating-label-input.json

Installation#

bash
npx shadcn@latest add https://ui.minidev.pro/r/floating-label-input.json

Usage#

tsx
import { FloatingLabelInput } from "@/components/ui/floating-label-input"

export function Example() {
  return <FloatingLabelInput />
}

API reference#

FloatingLabelInput props
PropTypeDefault
labelstring-
multilinebooleanfalse
rowsnumber4
typestring"text"
valuestring-
defaultValuestring""
onChange(value: string) => void-
iconReact.ReactNode-
hintReact.ReactNode-
errorReact.ReactNode-
disabledbooleanfalse
requiredbooleanfalse
idstring-
namestring-
autoCompletestring-
fieldsFloatingLabelField[]FIELDS
onSubmit(values: Record<string, string>) => void-
classNamestring-

Dependencies#

npm

lucide-reactmotion

Built from

Button

Related forms components#

AutocompleteText input that filters string options as you type, using ARIA combobox and listbox roles. Works controlled or uncontrolled and lists up to eight matches.Calendar MonthMonth calendar grid with weekday headers and clickable day cells that highlight the selected date. A simple Tailwind base for date views and schedulers.Character CountLive React character counter that shows the current count against a limit and turns red when it goes over. Announces changes politely to screen readers.Checkbox GroupVertical wrapper that groups related checkboxes under role group with even spacing. Use it with Checkbox and labels for multi select settings.CheckboxShadcn style checkbox on Base UI with an animated check, indeterminate state, invalid and disabled styles, and an enlarged hit area for touch.Chip FilterSingle select filter chips in React that behave as a radio group, with an accent ring on the active chip. Good for quick filters above lists and tables.
All form components