# Validation Checklist Input

> Validation checklist input for React and Tailwind CSS (shadcn/ui) that lights up a chip for each rule as the user types and sweeps a success ring around the field when every rule passes. It is built to replace red error text with live, positive feedback for passwords, usernames, slugs, handles and codes. A validation input is a text field that checks its value against rules while typing; this one takes rules with an id, label and test function, works controlled or uncontrolled, pops each chip and draws its check with the Web Animations API, animates the ring with a conic gradient sweep in the shadcn chart accent, reports progress through aria-describedby, aria-invalid and a polite live region, and exposes onAllPassed and onValidityChange so a submit button can enable itself. Supports text, password, email and url types, optional chips and ring, custom success labels, and a reduced motion fallback. Use it in sign-up forms, onboarding, account settings and admin tools. The included demo types a sample password and handle and makes no requests. Requires React only, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Input, Form, Validation, Animation, Password
- Live preview: https://21st.dev/@dhxwhy/components/validation-checklist-input

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/validation-checklist-input?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/input.md