Are the ai2 Validation inputs free?

Yes. The whole styled layer is free and MIT licensed, like the component core.

Can I change the size?

Yes. Every variation takes a size prop of sm, md, lg or xl, aligned to the base Button height scale.

Validation inputs

Five inputs that communicate state: success, error, a live state prop, a strength meter and a character counter. Each is sized, token-driven and wraps a real input.

InputsValidation

Installation

The styled layer is free and installs like any other ai2 component.

Run the following command

npx shadcn@latest add @ai2/inputs-validation

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install lucide-react

Copy the source

components/ui/inputs-validation.tsx

"use client"

import * as React from "react"
import { Check, X } from "lucide-react"

import { cn } from "@/lib/utils"

/* Validation input family: 5 text inputs that show a validation state. Color comes
   ONLY from tokens (success/warning/danger + shadcn). The state visuals are driven by
   CSS + a small piece of React state; there is no animation, so motion/react is not
   needed. Each one wraps a real <input> and passes through all the native props. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const height: Record<StyledSize, string> = {
  sm: "h-8 text-sm",
  md: "h-9 text-sm",
  lg: "h-10 text-base",
  xl: "h-12 text-base",
}

const fieldBase =
  "w-full bg-transparent text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"

const wrapBase =
  "relative inline-flex w-56 max-w-full items-center rounded-lg border px-3 transition-colors focus-within:ring-[3px]"

type Props = Omit<React.ComponentProps<"input">, "size"> & { size?: StyledSize }

/* Tracks the entered value whether controlled or uncontrolled (for the length calculation). */
function useTrackedValue(props: Pick<Props, "value" | "defaultValue" | "onChange">) {
  const [internal, setInternal] = React.useState(
    props.defaultValue != null ? String(props.defaultValue) : ""
  )
  const value = props.value != null ? String(props.value) : internal
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInternal(e.target.value)
    props.onChange?.(e)
  }
  return { value, onChange }
}

/* Success: gecerli iken yesil success kenarlik + saga hizali onay ikonu. */
export function SuccessInput({ className, size = "md", valid = true, ...props }: Props & { valid?: boolean }) {
  return (
    <span
      data-slot="styled-input"
      data-tone={valid ? "success" : "neutral"}
      className={cn(
        wrapBase,
        valid
          ? "border-success text-success-foreground focus-within:border-success focus-within:ring-success/25"
          : "border-field-border focus-within:border-ring focus-within:ring-ring/50",
        height[size],
        className
      )}
    >
      <input {...props} className={cn(fieldBase, "h-full")} />
      {valid ? <Check aria-hidden="true" className="ml-2 size-4 shrink-0 text-success" /> : null}
    </span>
  )
}

/* Error: danger kenarlik + altta mesaj slotu (message prop). */
export function ErrorInput({
  className,
  size = "md",
  message,
  ...props
}: Props & { message?: React.ReactNode }) {
  const autoId = React.useId()
  const msgId = props["aria-describedby"] ?? (message ? `${autoId}-msg` : undefined)
  return (
    <span data-slot="styled-input" data-tone="danger" className="inline-flex w-56 max-w-full flex-col gap-1">
      <span
        className={cn(
          wrapBase,
          "border-danger focus-within:border-danger focus-within:ring-danger/25",
          height[size],
          className
        )}
      >
        <input {...props} aria-invalid="true" aria-describedby={msgId} className={cn(fieldBase, "h-full")} />
        <X aria-hidden="true" className="ml-2 size-4 shrink-0 text-danger" />
      </span>
      {message ? (
        <span id={msgId} className="px-1 text-xs text-danger">
          {message}
        </span>
      ) : null}
    </span>
  )
}

/* Live: kenarlik rengi state prop'unu (idle/valid/invalid) izler. */
export function LiveInput({
  className,
  size = "md",
  state = "idle",
  ...props
}: Props & { state?: "idle" | "valid" | "invalid" }) {
  const tone =
    state === "valid"
      ? "border-success focus-within:border-success focus-within:ring-success/25"
      : state === "invalid"
        ? "border-danger focus-within:border-danger focus-within:ring-danger/25"
        : "border-field-border focus-within:border-ring focus-within:ring-ring/50"
  return (
    <span data-slot="styled-input" data-tone={state} className={cn(wrapBase, tone, height[size], className)}>
      <input
        {...props}
        aria-invalid={state === "invalid" ? "true" : undefined}
        className={cn(fieldBase, "h-full")}
      />
    </span>
  )
}

/* Strength: a 4-segment strength bar underneath, filling with the value length. */
export function StrengthInput({ className, size = "md", ...props }: Props) {
  const { value, onChange } = useTrackedValue(props)
  const hasLower = /[a-z]/.test(value)
  const hasUpper = /[A-Z]/.test(value)
  const hasDigit = /[0-9]/.test(value)
  const hasSymbol = /[^A-Za-z0-9]/.test(value)
  const variety = [hasLower, hasUpper, hasDigit, hasSymbol].filter(Boolean).length
  const score =
    value.length === 0 ? 0 : Math.min(4, Math.max(value.length >= 8 ? 2 : 1, variety))
  const barTone =
    score <= 1 ? "bg-danger" : score === 2 ? "bg-warning" : score === 3 ? "bg-info" : "bg-success"
  return (
    <span data-slot="styled-input" className="inline-flex w-56 max-w-full flex-col gap-1.5">
      <span
        className={cn(
          wrapBase,
          "border-field-border focus-within:border-ring focus-within:ring-ring/50",
          height[size],
          className
        )}
      >
        <input type="password" {...props} onChange={onChange} className={cn(fieldBase, "h-full")} />
      </span>
      <span aria-hidden="true" className="flex gap-1">
        {[0, 1, 2, 3].map((i) => (
          <span
            key={i}
            className={cn(
              "h-1 flex-1 rounded-full transition-colors duration-(--motion-base) motion-reduce:transition-none",
              i < score ? barTone : "bg-muted"
            )}
          />
        ))}
      </span>
    </span>
  )
}

/* CharCount: it accepts maxLength and shows a live character counter below. */
export function CharCountInput({ className, size = "md", maxLength, ...props }: Props) {
  const { value, onChange } = useTrackedValue(props)
  const count = value.length
  const near = maxLength != null && count >= maxLength * 0.9
  return (
    <span data-slot="styled-input" className="inline-flex w-56 max-w-full flex-col gap-1">
      <span
        className={cn(
          wrapBase,
          "border-field-border focus-within:border-ring focus-within:ring-ring/50",
          height[size],
          className
        )}
      >
        <input {...props} maxLength={maxLength} onChange={onChange} className={cn(fieldBase, "h-full")} />
      </span>
      <span
        className={cn(
          "self-end px-1 text-xs tabular-nums",
          near ? "text-warning" : "text-muted-foreground"
        )}
      >
        {count}
        {maxLength != null ? `/${maxLength}` : null}
      </span>
    </span>
  )
}

Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.

Variations

5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.

Success

A success-token border and check when valid.

Error

A danger-token border with a message slot.

Live

The border color follows a state prop.

Strength

A strength bar driven by value length.

Char count

A live character counter.

0/40

0/40sm

0/40md

0/40lg

0/40xl

ai2 Validation inputs: 5 styled variations on the token system

The ai2 Validation inputs are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around inputs that show validation state. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.

Motion runs on framer-motion: state changes run on token CSS transitions. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the transitions are disabled and the state still updates.

What is in the ai2 Validation inputs?

5 exports in one file: Success, Error, Live, Strength and Char count. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.

You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.

Why use it

On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.

Features

Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
framer-motion: state changes run on token CSS transitions.
Reduced-motion aware: Under prefers-reduced-motion, the transitions are disabled and the state still updates.
Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.

Production tips

Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.

Works with the rest of ai2

The Validation inputs sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.