Input

Input with a spring-animated caret.

Installation

npx shadcn@latest add @iconiq/input

Props

Input

Input with a spring-animated caret.

valuestring

Controlled input value. Pair with `onValueChange` or `onChange` when the parent owns the text.

defaultValuestring

Initial value for uncontrolled usage.

onValueChange(value: string, eventDetails: InputChangeEventDetails) => void

Base UI change handler with the next string value and event metadata. Preferred for controlled forms.

onChangeReact.ChangeEventHandler<HTMLInputElement>

Native change handler fired after typing, paste, cut, or autofill.

typeReact.HTMLInputTypeAttribute

Default text

Native input type. Smooth caret is disabled for `file` and `hidden`. Password mode measures bullet glyphs for caret placement.

labelReact.ReactNode

Optional field label rendered above the control with an associated `htmlFor` id.

labelClassNamestring

Classes merged onto the optional label element.

placeholderstring

Default input

Placeholder shown when the field is empty.

fontSizenumber

Optional pixel font size override for the inner field. Defaults to the standard `text-sm` input sizing.

spring{ stiffness?: number; damping?: number; mass?: number }

Spring config for caret movement. Defaults to stiffness 500, damping 30, mass 0.5.

wrapperClassNamestring

Classes merged onto the outer label wrapper when `label` is provided, or onto the input shell when no label is set.

idstring

Optional id forwarded to the input. A generated id is used when omitted so labels stay associated.

classNamestring | ((state: InputState) => string)

Classes merged onto the native input element. Base UI also supports a state callback.

styleReact.CSSProperties | ((state: InputState) => React.CSSProperties)

Inline styles merged onto the native input element. Base UI also supports a state callback.

renderReact.ReactElement | ((props: React.ComponentProps<'input'>) => React.ReactElement)

Base UI render override for the native input element. Custom renders replace the default caret wiring.

disabledboolean

Default false

Disables interaction on the native input.

Built on `@base-ui/react/input` and works with Base UI `Field` for labels, descriptions, and validation state.

Uses a hidden measurement span to position the caret across fonts, password bullets, and horizontal scroll.

Respects `prefers-reduced-motion` by snapping the caret spring when motion is reduced.

Standard input attributes such as `autoComplete`, `name`, `readOnly`, `required`, `aria-*`, and `data-*` are forwarded to the native element.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @base-ui/react/input, motion.

This page documents the Base UI install only. Input uses the Base UI Input primitive for value handling and Field integration.

The generated registry file is /r/input.json.