Input

A standalone text input field with focus rings, invalid state, and dark mode support — built with Tailwind CSS.

Preview

Basic input

import { Input } from '@/registry/ui-kit/tailwind-input/react'

function Example() {
  return <Input placeholder="Enter your email" />
}

Invalid state

import { Input } from '@/registry/ui-kit/tailwind-input/react'

function Example() {
  return <Input invalid placeholder="Invalid input" />
}

Disabled

import { Input } from '@/registry/ui-kit/tailwind-input/react'

function Example() {
  return <Input disabled placeholder="Disabled" />
}

Component API

Prop	Default	Description
`invalid`	`false`	Show the input in an invalid/error state with red border.
`className`	`""`	Additional CSS classes to apply.

Source Code

"use client";

import { forwardRef } from "react";

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  invalid?: boolean;
  className?: string;
}

const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ invalid = false, className = "", ...props }, ref) => {
    return (
      <input
        ref={ref}
        aria-invalid={invalid || undefined}
        className={[
          "block w-full rounded-lg border bg-white px-3.5 py-2 text-sm text-zinc-900 shadow-sm outline-none transition-colors placeholder:text-zinc-400 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500",
          invalid
            ? "border-red-500 focus:border-red-500 focus:ring-2 focus:ring-red-500/20"
            : "border-zinc-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:focus:border-indigo-400 dark:focus:ring-indigo-400/20",
          className,
        ].join(" ")}
        {...props}
      />
    );
  }
);
Input.displayName = "Input";

export { Input };
export default Input;