# Input With Validation States — React Input Component

> A field that debounces a sync or async validator and moves through checking, valid and invalid states with a morphing status icon and a sliding message.

- Category: [Inputs](https://pixelpapa.com/components/inputs.md)
- Tags: input, validation, async, status, form
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/inputs/input-with-validation-states

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/input-with-validation-states
```

The file is written to `components/pixelpapa/input-with-validation-states.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/inputs/input-with-validation-states.

## AI prompt

```text
Add the "Input With Validation States" component from PixelPapa UI to this project.

What it is: A field that debounces a sync or async validator and moves through checking, valid and invalid states with a morphing status icon and a sliding message.
Category: Inputs. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/input-with-validation-states
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/input-with-validation-states.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/input-with-validation-states.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/input-with-validation-states" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More inputs

- [Input Credit Card](https://pixelpapa.com/components/inputs/input-credit-card.md) (Pro): A payment form with a live card preview: digits group in fours, a highlight glides to the part you are editing, and the card flips over for the security code.
- [Input Currency Format](https://pixelpapa.com/components/inputs/input-currency-format.md) (Pro): A large amount field that groups thousands as you type without losing the caret, pads cents on blur, and grows to hug its digits.
- [Input Floating Label](https://pixelpapa.com/components/inputs/input-floating-label.md): Text fields whose label rests as a placeholder, then springs up into a small caption on focus or when filled; inset and underline variants.
- [Input Inline Edit](https://pixelpapa.com/components/inputs/input-inline-edit.md): Text that turns into a field in place with no layout shift; Enter or blur saves with a brief tick, Escape puts the old value back.
- [Input Mention Autocomplete](https://pixelpapa.com/components/inputs/input-mention-autocomplete.md) (Pro): A comment box that opens a people list when you type @, filters as you go, inserts the handle with Enter or Tab and tints finished mentions inline.
- [Input Number Stepper](https://pixelpapa.com/components/inputs/input-number-stepper.md) (Pro): A spinbutton whose digits roll up or down like an odometer; hold a button to repeat with acceleration, or use the arrow keys.