InputGroup

Input field group with proximity hover and validation.

Installation

npx shadcn@latest add https://fluid-functionalism.vercel.app/r/input-group.json

Basic

Multiple Fields

Error State

API Reference — InputGroup

PropTypeDefaultDescription
childrenReactNodeInputField children.

API Reference — InputField

PropTypeDefaultDescription
labelstringLabel text above the input.
indexnumberPosition index within the group.
valuestringControlled input value.
onChange(value: string) => voidCalled when the input value changes.
placeholderstringPlaceholder text.
iconLucideIconLeading icon inside the input.
errorstringError message shown below the input.
disabledbooleanfalseDisables the input.