Components

Text Input

Single-line field: a translucent grey box with a hairline ring that turns blue on focus and red when invalid. Optional leading icon and trailing content.

Usage

Use it to:

  • short free text: names, emails, URLs, amounts with a unit
  • inline filters (or SearchInput)

Don’t use it to:

  • long text (use Textarea)
  • picking from known values (use Select / Combobox)
  • numbers with steppers (use NumberInput)

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/TextInputExample.tsx
import { TextInput } from '@krackedui/motion';

export function NameInput() {
  return (
    <TextInput aria-label="Workspace name" placeholder="Acme Inc." />
  );
}

Examples

Size

Icon and trailing content

USD

States

Dark theme

API Reference

TextInput

The ref and all other <input> props go to the <input>; className / style style the box. Adds:

PropTypeDefault
invalid
boolean
false
disabled
boolean
false
required
boolean
false
name
string
size
"sm""md""lg"
"md"
icon
IconName
trailing
ReactNode
inputClassName
string

Accessibility

  • A native <input>: every keyboard behaviour is the browser’s. The ring on the box shows focus.
  • It has no visible label of its own: wrap it in Field (which wires id, aria-describedby and aria-invalid) or pass aria-label. A placeholder is not a label.
  • invalid sets aria-invalid; describe the error in text (Field’s error), not only by color.
© 2026 Motion. Internal documentation.