Docs·Smooth Input

Smooth Input

A polished text field with a spring-following caret, stable measurement, controlled or uncontrolled state, and accessible help and error text.

Installation

$pnpm dlx shadcn@latest add @spiderui/smooth-input

Usage

API Reference

PropTypeDefault
valueControlled input value.
string | number—
defaultValueInitial uncontrolled value.
string | number—
labelAccessible label linked to the field.
ReactNode—
descriptionHelp text linked with aria-describedby.
ReactNode—
errorMessageAccessible error text that marks the field invalid.
ReactNode—
invalidApplies invalid styling and aria-invalid.
booleanfalse
inputClassNameStyles shared by the input and caret measurement layer.
string—
caretClassNameStyles the animated caret.
string—
containerClassNameStyles the outer field container.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x

The caret follows edits, selections, and horizontal scrolling.

import { SmoothInput } from "@/components/ui/smooth-input"
export function ProfileFields() {
  const [title, setTitle] = useState("Designing better interfaces")

  return (
    <SmoothInput
      label="Title"
      value={title}
      onChange={(event) => setTitle(event.target.value)}
      description="Used as the public page title."
    />
  )
}